怎么用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.router.route.params.username

更多React相关技术文章,请访问React答疑栏目进行学习!

以上就是怎么用react路由的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读