React Router 基本使用及實際項目使用詳解

React Router 是搭配React項目開發時強大的路由庫，它可讓你嚮應用中快速地添加視圖和數據流，同時保持頁面與 URL 間的同步。

1、安裝react-route-dom

在你的項目中執行

npm i react-router-dom
複製代碼

來安裝reacr-router

2、編寫最簡單的路由

在個人項目中App是做爲個人根組件的，我編寫基本路由就在App組件內，這裏根據實際項目來寫，有的是寫在單獨的router組件裏。

index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import App from './views/App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.register();

複製代碼

App.jsx :

import React from 'react'
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'
import Home from './Home/Home'
import Login from './Login/Login'

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/home" component={Home} />
        <Route path="/login" component={Login} />
        <Redirect from="*" to="/home" />
      </Switch>
    </Router>
  )
}

export default App
複製代碼

• 在App.jsx中引入了react-router-dom庫中的BrowserRouter設置別名爲Router，與BrowserRouter相對應的還有HashRouter，BrowserRouter就是咱們最多見的history路由，HashRouter就是會在路由前加#的hash路由。
• react-router-dom庫中的Route，兩個屬性path和component表示匹配的路由爲path的時候加載的組件component
• react-router-dom庫中的Switch，Switch表示每次只匹配一個路由，路由Route從上往下模糊匹配(即 /home可能同時匹配/home/1和/home/2)，加了Switch後只會加載最早匹配到的組件
• react-router-dom庫中的Redirect，表示重定向路由，其中兩個值from和to，from表示匹配到的路由，to是重定向的路由
• 至此，咱們的一個最簡單的路由實現完畢，能夠實現輸入/home加載Home組件，輸入/login加載Login組件，且其餘不匹配的路由所有重定向到/home

3、實現路由跳轉及導航路由

上面咱們實現了基本的路由功能，可是如今咱們只能在瀏覽器中輸入的方式進行跳轉，咱們想要在頁面中有頭部導航，或者按鈕點擊跳轉的功能。

建立Header組件：

import React from "react";
import { NavLink } from "react-router-dom";
import './Header.scss'

function Header() {
  return (
    <div>
      <ul>
        <li>
          <NavLink to="/home/user">用戶管理</NavLink>
        </li>
        <li>
          <NavLink to="/home/article">文章管理</NavLink>
        </li>
      </ul>
    </div>
  );
}

export default Header;
複製代碼

• Header組件中引入react-router-dom的NavLink，是專門用來作導航連接跳轉的標籤，與之對應的是Link。用法相似只有一個to屬性代表點擊跳轉到哪一個連接。
• NavLink和Link不一樣的是，NavLink會在匹配的路由中加一個active樣式，咱們能夠自定義這個樣式，通常用在總體頭部導航組件等，Link沒有匹配路由樣式，通常用在按鈕點擊跳轉等。

4、實現多級路由嵌套

上面咱們只實現了一級路由，但咱們還想在Home組件中有二級路由怎麼實現呢？

Home組件：

import React from "react";
import { Route, Redirect } from "react-router-dom";
import Header from "../../components/Header/Header";
import User from "../User/User";
import Article from "../Article/Article";

function Home() {
  return (
    <div>
      <Header />
      <Route path="/home/user" component={User} />
      <Route path="/home/article" component={Article} />
      <Redirect from="*" to="/home/user" />
    </div>
  );
}

export default Home;
複製代碼

• 在Home組件中引入react-router-dom的Route和Redirect，這裏咱們沒有再引入Router和Switch，由於他們是在App組件中，會全局適配。
• 用法與以前同樣，只不過咱們匹配的路徑path成了/home下的二級路由模式/home/user
• 並引入咱們以前寫的Header組件實現二級路由跳轉，其更深層級的路由與這個同樣，只須要在子組件中再嵌套就行

5、動態路由及路由傳參

咱們想要在路由跳轉的傳遞參數就須要用到咱們的動態路由了。 用法很是簡單，在定義路由Route時寫成/home/article/:id後面接一個:參數名

看一個示例:

import React from "react";
import { Route } from "react-router-dom";
import Article from "../Article/Article";

function Home() {
  return (
    <div>
      <Route path="/home/article/:id" component={Article} />
    </div>
  );
}

export default Home;
複製代碼

而後在跳轉的時候在路由後面加上傳遞的id值

<Link to="/home/article/1">文章管理</Link>
複製代碼

在Article組件中接收動態路由傳遞過來的id值

import React from 'react'

function Article(props) {
  console.log(props.match.params.id);
  return (
    <div>
      文章信息
    </div>
  )
}

export default Article
複製代碼

在props.match.params.id就能夠接收到傳遞過來的值

但當咱們在路由中想要傳遞更多更復雜的參數的這樣方式就很是麻煩了，此時咱們用到另外一種方式

Route定義仍是按普通方式

<Route path="/home/article" component={Article} />
複製代碼

在Link跳轉時傳遞參數

<Link to="/home/article?a=1&b=2">文章管理</Link>
複製代碼

或者

<Link to={{
  pathname: "/home/article",
  search: "?a=1&b=2"
}}>文章管理</Link>
複製代碼

在Article組件中接受參數

import qs from 'qs'
qs.parse(props.location.search)
複製代碼

引入qs模塊，用qs.parse方法解析參數

6、編程式導航

能夠看到咱們以前的路由跳轉全是Link和NavLink標籤式跳轉的方式，但某些狀況下，好比咱們在跳轉前會執行一些邏輯判斷等符合條件再跳轉，此時就須要用到咱們的編程式導航。

使用了Route的組件上props裏面會接收三個屬性：history，location，match，其中history就是咱們用來進行編程式導航跳轉的，location和match裏面是咱們的一些路由信息，如當前pathname，參數等

• props.history.push 進行路由跳轉，會生成歷史記錄

props.history.push("/home/article")
複製代碼

• props.history.replace 進行路由跳轉，替換當前路由，不會生成歷史記錄

props.history.replace("/home/article")
複製代碼

• props.history.go | props.history.goBack 路由前進一步 | 路由後退一步

至此，咱們React Router 的基本使用以及實際項目中的使用就講解完畢了，若是還有什麼不理解的小夥伴能夠在下面留言哦！