react native 总结

一切顺势而行

已于 2024-03-23 20:16:43 修改

阅读量368

点赞数 3

文章标签： react native react.js javascript

于 2024-03-23 11:26:32 首次发布

本文链接：https://blog.csdn.net/x17809211858/article/details/136963473

版权

本文比较了React中的App.js如何使用`react-router-dom`实现路由，与Vue中的index.js组件化结构进行对照，展示了在两种框架中定义路由和组件的方法。

摘要由CSDN通过智能技术生成

react app.js 相当与vue app.vue

import React from 'react';
import './App.css';
import ReactRoute from  './router'
import {HashRouter as Router,Link} from 'react-router-dom'
class  App extends React.Component {
    constructor(props){
        super(props)
    }
    render(){
         return ( <div className = "App" >
                <ReactRoute/>
                <Router>
                    <Link to="/a">RouterA</Link>
                    <br/>
                <Link to="/b">RouterB</Link>
                </Router>
                <br/>
                <br/>
                <button onClick={()=>{
                    this.props.history.push("/a")}
                }>跳转到a</button>
                <br/>
                <button onClick={() => {
                this.props.history.push("/b")}
                }>跳转到b</button>
            </div>
        );
    }
}

export default App;

相当于vue 的index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
ReactDOM.render( <
    React.StrictMode >
        <App/>
    </React.StrictMode>,
    document.getElementById("root")
);

react 中定义路由

import { HashRouter as Router, Route, Switch} from 'react-router-dom';
import React from 'react';
import RouterA from './RouterA';
import RouterB from './RouterB';
export default function ReactRoute() {
    return ( <div >
        <Router>
            <Switch>
                    <Route exact path = "/a" component={RouterA}/> 
                    <Route exact path = "/b" component={RouterB}/>            
            </Switch>
        </Router> 

        </div>
    );
}

react 中定义组件

import React from "react";
import ReactDOM from "react-dom";
class RouterA  extends React.Component {
    render(){
            return <div >
            <h1 > RouterA < /h1> 
        </div>;        
    }

}
export default RouterA;