怎么用react路由

怎么用react路由

一、基本路由

步骤一：安装路由

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.rout<b style="color:transparent">来源gao@dai!ma.com搞$代^码网</b>er.route.params.username

更多React相关技术文章，请访问gaodaima搞代码网进行学习！

以上就是怎么用react路由的详细内容，更多请关注gaodaima搞代码网其它相关文章！

喜欢 (0)赏

[搞代码]

分享 (0)