ReactTraining/react-router的github地址： https://reacttraining.com/react-router/
相關(guān)文檔：View the docs here

相關(guān)組件介紹

HashRouter 有#號(hào)，錨點(diǎn)實(shí)現(xiàn)

整個(gè)路由容器，將來(lái)配置路由，是一定要有一個(gè)HashRouter

BrowserRouter 沒(méi)有#號(hào) <h5><h5>實(shí)現(xiàn)

路由鏈接 <Link>: to

Link: to屬性，表示的點(diǎn)擊這個(gè)Link，跳轉(zhuǎn)到的路由， Link最終渲染成a標(biāo)簽
相當(dāng)于vue中 router-link 配置路由的連接，最終會(huì)渲染成一個(gè)a標(biāo)簽

路由鏈接<NavLink>

作用和Link是一樣的，路由跳轉(zhuǎn) NavLink比Link更強(qiáng)大的一點(diǎn)是可以指定樣式

配置路由規(guī)則

如何在react項(xiàng)目中使用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 有#號(hào)，錨點(diǎn)實(shí)現(xiàn)
  // BrowserRouter 沒(méi)有#號(hào) <h5><h5>實(shí)現(xiàn)
  render() {
    return (
      <BrowserRouter>
        <ul>
          <li>
            <Link to="/home">首頁(yè)</Link>
          </li>
          <li>
            <Link to="/user">用戶(hù)</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>首頁(yè)</div>
  }
}

<Switch>

使用Switch把一組route包裹起來(lái)，保證只顯示一個(gè)組件

<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>

路由參數(shù)

/news/:id 表示匹配 /news/xx /news/a /news/b
通過(guò)props.match就可以獲取到路由的參數(shù)
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來(lái)實(shí)現(xiàn)react中路由的跳轉(zhuǎn)

react-router編程式導(dǎo)航實(shí)現(xiàn)路由跳轉(zhuǎn)
如果想要通過(guò)js來(lái)實(shí)現(xiàn)react中路由的跳轉(zhuǎn)

1. 導(dǎo)入withRouter方法
2. 使用withRouter包裹住當(dāng)前組件
3. withRouter把當(dāng)前組件包裹后，在當(dāng)前組件的props中就能夠獲取history對(duì)象，通過(guò)history對(duì)象就可以實(shí)現(xiàn)路由的額跳轉(zhuǎn)

Login.jsx相關(guān)代碼

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')}>點(diǎn)擊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>
}