首页 > 技术文章 > react-router-dom 的基本使用

nothingness 2020-07-18 22:13 原文

 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>
 

推荐阅读