一, 基本路由
步骤一: 安装路由
NPM install react-router-dom --save
步骤二: 引入路由
import { BrowserRouter, Route } from 'react-router-dom'
步骤三: 使用
- import Login from './pages/login'
- import Home from './pages/home'
- class App extends Component {
- render() {
- return (
- <Provider store={ store }>
- <div>
- <GlobalStyle />
- <GlobalIcon />
- <BrowserRouter>
- <div>
- <Route path='/' exact component={Login}></Route>
- <Route path='/home' exact component={Home}></Route>
- </div>
- </BrowserRouter>
- </div>
- </Provider>
- );
- }
- }
二, 动态路由
使用 prop-types 获取组件的属性类型和默认属性
步骤一: 安装 prop-types
NPM install prop-types --save
步骤二: 引入
import PropTypes from 'prop-types';
步骤三: 使用
- static contextTypes = {
- router: PropTypes.object.isRequired
- };
- this.context.router.history.push("/home");
三, 获取路由参数
步骤一: 引入 prop-types
import PropTypes from 'prop-types';
步骤二: 使用
- static contextTypes = {
- router: PropTypes.object.isRequired
- };
- this.context.router.route.params.username
来源: http://www.css88.com/qa/react/14236.html