路由指的是根据url的不同显示不同的内容，然后一个页面每个页面都是一个组件，这个叫做前端组件化
|
1 |
yarn add react-router-dom |
使用非常的简单
- 引入import {BrowserRouter, Route} from ‘react-router-dom’;
- 使用<Route path=’/’ exact render={() => <div>home</div>}></Route>
需要注意的是，provider和browserRouter都要求只能由一个child，所以用一个div包裹起来
- BrowserRouter 组件 代表路由
- Route 组件代表路由规则 参数exact表示精准匹配
- 这里直接render了，也可以使用在Route中使用component参数从而能够返回一个组件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
import React, {Component, Fragment} from 'react'; import {Provider} from 'react-redux'; import Header from './common/header/index.js' import {GlobalStyle} from './style' import {GlobalIconStyle} from './statics/iconfont/iconfont'; import {BrowserRouter, Route} from 'react-router-dom'; import store from './store'; class App extends Component { render() { return ( <Fragment> <GlobalStyle/> <GlobalIconStyle/> <Provider store={store}> <div> <Header/> <BrowserRouter> <div> <Route path='/' exact render={() => <div>home</div>}></Route> <Route path='/detail' exact render={() => <div>detail</div>}></Route> </div> </BrowserRouter> </div> </Provider> </Fragment> ); } } export default App; |
