react native 总结

一切顺势而行2024-03-24 19:17

react app.js 相当与vue app.vue

javascript 复制代码

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

javascript 复制代码

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 中定义路由

TypeScript 复制代码

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 中定义组件

TypeScript 复制代码

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

}
export default RouterA;