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>
 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM