react-router-dom 的基本使用

 1  安装：cnpm i react-router-dom
 2 
 3 
 4 
 5   <Route path='/' exact render={()=><div>home</div>}></Route>
 6 
 7 当路径为/根路径时候显示里面的内容home，exact 表示完全配置这个路径，
 8 
 9 例如为http://localhost:3000/只显示home，而http://localhost:3000/detail只显示detail，如果不添加exact 
10 
11 在/页面就显示home,但是在/detail时候他们两个都会显示
12 import React,{Component} from 'react';
13 import { BrowserRouter, Route,} from 'react-router-dom'
14 
15 class App extends Component{
16   render(){
17     return(
18       <Provider store = {store}>
19         <React.Fragment>
20           <Header />
21             <BrowserRouter>
22               <React.Fragment>
23               <Route path='/' exact render={()=><div>home</div>}></Route>
24               <Route path='/detail' exact render={()=><div>detail</div>}></Route>
25               </React.Fragment>
26             </BrowserRouter>
27         </React.Fragment>
28       </Provider>
29     )
30   }
31 }
32 
33 export default App;

引入组件渲染模块，使用component方法，component是从react中结构出来的

import Detail from './pages/detail';

import store from './store/index';

 

 <BrowserRouter>

              <React.Fragment>

              <Route path='/' exact component={ Home }></Route>

              <Route path='/detail' exact  component={ Detail }></Route>

              </React.Fragment>

</BrowserRouter>