react-router-dom

先说概念

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;