React路由5.0配置

1, 下载react的路由模块
    npm install react-router-dom@5 --save
2, 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件  
    (注: 哈希模式用HashRouter 历史模式用BrowserRouter)
    import { HashRouter } from 'react-router-dom'
    ReactDOM.render(
          <HashRouter >
            <App />
        </HashRouter >,
          document.getElementById('root')
    );
3, 创建路由文件src/router/index.js,  并从路由模块中导入工具组件Route 
    import { Route, Switch } from "react-router-dom";
4, 创建路由组件,配置路由, 并导出
    export default function MyRouter(){
        return(
            <Switch >
                <Route exact path="/"  component={Home} />
                {/* 路由重定向, 使用Redirect组件实现, 要写在最后 */}
                <Redirect from="/" to="/home" />
            </Switch >
        )
    }
5, 在app.js中导入路由组件
    import RouterView from './router/index';
6, 在根组件app模板中添加路由组件,即路由出口
    <RouterView></RouterView>
7, 在需要跳转的页面, 从路由模块导入工具组件 Link
    import {Link} from 'react-router-dom'
8, 使用Link组件执行路由跳转
    <Link to="/">首页/Link>