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>