react-router组件介绍以及配置规则

ReactTraining/react-router的github地址： https://reacttraining.com/react-router/
相关文档：View the docs here

相关组件介绍

HashRouter 有#号，锚点实现

整个路由容器，将来配置路由，是一定要有一个HashRouter

BrowserRouter 没有#号 <h5><h5>实现

路由链接 <Link>: to

Link: to属性，表示的点击这个Link，跳转到的路由， Link最终渲染成a标签
相当于vue中 router-link 配置路由的连接，最终会渲染成一个a标签

路由链接<NavLink>

作用和Link是一样的，路由跳转 NavLink比Link更强大的一点是可以指定样式

配置路由规则

如何在react项目中使用react-router？

1. 安装react-router包：npm i react-router-dom
2. 需要引入一些组件

import React from 'react'
import Home from './components/Home.jsx'
import User from './components/User.jsx'
import Login from './components/Login.jsx'
import News from './components/News.jsx'
import Nested from './components/Nested.jsx'

import { BrowserRouter, Link, Route, Redirect } from 'react-router-dom';
class App extends React.Component {
  // HashRouter 有#号，锚点实现
  // BrowserRouter 没有#号 <h5><h5>实现
  render() {
    return (
      <BrowserRouter>
        <ul>
          <li>
            <Link to="/home">首页</Link>
          </li>
          <li>
            <Link to="/user">用户</Link>
          </li>
          <li>
            <Link to="/login">登陆</Link>
          </li>
          <li>
            <Link to="/nested">嵌套</Link>
          </li>
        </ul>
         {/* 路由都匹配上exact表示精确匹配 */}
        {/* <Route path="/" component={Home} exact></Route> */}
        {/* Redirect: 表示路由的重定向 */}
        <Redirect from="/" to="/home"></Redirect>
        <Route path="/home" component={Home}></Route>
        <Route path="/user" component={User}></Route>
        <Route path="/login" component={Login}></Route>
        <Route path="/nested" component={Nested}></Route>
        {/* /news/:id   表示匹配 /news/xx  /news/a  /news/b */}
        {/* <Route path="/news/:id" component={News}></Route> */}
        <Route path="/news/:type/:id" component={News}></Route>
      </BrowserRouter>
    )
  }
}
export default App

Home.jsx

import React from 'react'
export default class Home extends React.Component {
  render() {
    return <div>首页</div>
  }
}

<Switch>

使用Switch把一组route包裹起来，保证只显示一个组件

<Switch>
  <Route path="/home" component={Home} />
  <Route path="/user" component={User} />
  <Route path="/login" component={Login} />
</Switch>

exact

path="/" 只要是/xxx的路由都匹配上exact表示精确匹配

<Route path="/" component={Home} exact></Route>

路由参数

/news/:id 表示匹配 /news/xx /news/a /news/b
通过props.match就可以获取到路由的参数
news.jsx

import React from 'react'
export default class News extends React.Component {
  render() {
    // console.log(this.props)
    let { match } = this.props
    console.log(match)
    return (
      <div>这是News组件</div>
    )
  }
}

Redirect: 表示路由的重定向

<Redirect exact from="/" to="/home" />

withRouter : js来实现react中路由的跳转

react-router编程式导航实现路由跳转
如果想要通过js来实现react中路由的跳转

1. 导入withRouter方法
2. 使用withRouter包裹住当前组件
3. withRouter把当前组件包裹后，在当前组件的props中就能够获取history对象，通过history对象就可以实现路由的额跳转

Login.jsx相关代码

import React from 'react'
import {withRouter} from 'react-router-dom'

class Login extends React.Component {
  render() {
    console.log(this.props.history)
    let {history} = this.props
    return (
      <div>
        这是Login组件{' '}
        <button onClick={() => history.push('./home')}>点击redirect</button>
      </div>
    )
  }
}
export default withRouter(Login)

嵌套路由

import React from 'react'
import {NavLink, Switch, Route} from 'react-router-dom'
export default class Nested extends React.Component {
  render() {
    return (
      <div>
        <ul>
          <li>
            <NavLink to="/nested/roles">角色管理</NavLink>
          </li>
          <li>
            <NavLink to="/nested/list">列表管理</NavLink>
          </li>
          <li>
            <NavLink to="/nested/product">商品管理</NavLink>
          </li>
        </ul>

        <Switch>
          <Route path="/nested/roles" component={Roles}></Route>
          <Route path="/nested/list" component={List}></Route>
          <Route path="/nested/product" component={Product}></Route>
        </Switch>
      </div>
    )
  }
}
function Roles() {
  return <div>这是roles组件</div>
}
function List() {
  return <div>这是list组件</div>
}
function Product() {
  return <div>这是product组件</div>
}