先说概念
react-router: 实现了路由的核心功能
react-router-dom: 基于react-router，加入了在浏览器运行环境下的一些功能，例如：Link组件，会渲染一个a标签，Link组件源码a标签行; BrowserRouter和HashRouter组件，前者使用pushState和popState事件构建路由，后者使用window.location.hash和hashchange事件构建路由。
import React from ‘react‘; import ReactDOM from ‘react-dom‘; import ‘./index.css‘; import ‘./utils/initEnv‘; // import App from ‘./App‘; import Routes from ‘./router/router‘; import * as serviceWorker from ‘./serviceWorker‘; ReactDOM.render( <Routes/>, document.getElementById(‘root‘) ); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();
上路由文件
import React from ‘react‘
import {Route,Switch,HashRouter} from ‘react-router-dom‘;
import Home from ‘../views/Home‘;
import List from ‘../views/List‘;
import Detail from ‘../views/Detail‘;
const MyRoute=()=>{
return <HashRouter>{/*return不能少*/}
<Switch>{/*只匹配一次*/}
<Route exact path="/" component={Home}/> {/*路径为/时匹配首页*/}
<Route path="/list" component={List}/>
<Route path="/detail" component={Detail}/>
</Switch>
</HashRouter>
}
export default MyRoute;
原文：https://www.cnblogs.com/zhihou/p/12006264.html