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;