react路由的简单配置

import Reactfrom'react';

import ReactDomfrom'react-dom';

import {Router,Route,BrowserRouter,Switch}from'react-router-dom';

import createBrowserHistoryfrom"history/createBrowserHistory";

import routeTestfrom'./pages/routeTest';

import Homefrom'./Home';

const history=createBrowserHistory();

ReactDom.render(

    <Routerhistory={history}> 

        <Switch>

         <Routepath='/'exactcomponent={Home}/>

         <Routepath='/hooksDemo'exactcomponent={routeTest}/>

     </Switch>

    </Router>,document.getElementById('app')

);

Router的history是必需的props

Router中只能有一个子元素

Switch：只渲染第一个与当前地址匹配的<Route>

Route的props path为路径，component为路径对应的页面，exact精确匹配

这是一个简单的路由配置，可以实现页面的简单跳转，但是如果页面比较多，可以把页面组件引入和Route组件提取出来，以保证入口页面良好的可阅读性。