react-router-dom v6 使用詳細示例

Posted on by

一、基本使用

首先安裝依賴：

npm i react-router-dom

引入實現路由所需的組件，以及頁面組件：

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Foo from "./Foo";
import Bar from "./Bar";
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/foo" element={<Foo />} />
        <Route path="/bar" element={<Bar />} />
      </Routes>
    </BrowserRouter>
  );
}
  • path：路徑
  • element：要渲染的組件

註意：BrowserRouter組件最好放在最頂層所有組件之外，這樣能確保內部組件使用 Link 做路由跳轉時不出錯

二、路由跳轉

在跳轉路由時，如果路徑是/開頭的則是絕對路由，否則為相對路由，即相對於當前 URL進行改變

2.1 Link 組件

Link組件隻能在Router內部使用，因此使用到Link組件的組件一定要放在頂層的 Router 之內

import { Link } from "react-router-dom";

<Link to="foo">to foo</Link>;

2.2 NavLink 組件

  • NavLink組件和Link組件的功能是一致的，區別在於可以判斷其to屬性是否是當前匹配到的路由
  • NavLink組件的style或className可以接收一個函數，函數接收一個含有isActive字段的對象為參數，可根據該參數調整樣式
import { NavLink } from "react-router-dom";

function Foo() {
  return (
    <NavLink style={({ isActive }) => ({ color: isActive ? "red" : "#fff" })}>
      Click here
    </NavLink>
  );
}

2.3 編程式跳轉

使用useNavigate鉤子函數生成navigate函數，可以通過 JS 代碼完成路由跳轉

useNavigate取代瞭原先版本中的useHistory

import { useNavigate } from 'react-router-dom';

function Foo(){
    const navigate = useNavigate();
    return (
        // 上一個路徑：/a；    當前路徑： /a/a1
        <div onClick={() => navigate('/b')}>跳轉到/b</div>
        <div onClick={() => navigate('a11')}>跳轉到/a/a1/a11</div>
        <div onClick={() => navigate('../a2')}>跳轉到/a/a2</div>
        <div onClick={() => navigate(-1)}>跳轉到/a</div>
    )
}
  • 可以直接傳入要跳轉的目標路由（可以使用相對路徑，語法和 JS 相同）
  • 傳入-1表示後退

三、動態路由參數

3.1 路徑參數

  • 在Route組件中的path屬性中定義路徑參數
  • 在組件內通過useParams hook 訪問路徑參數
<BrowserRouter>
  <Routes>
    <Route path="/foo/:id" element={<Foo />} />
  </Routes>
</BrowserRouter>;

import { useParams } from "react-router-dom";
export default function Foo() {
  const params = useParams();
  return (
    <div>
      <h1>{params.id}</h1>
    </div>
  );
}

路徑匹配規則

當URL同時匹配到含有路徑參數的路徑和無參數路徑時，有限匹配沒有參數的”具體的“（specific）路徑。

<Route path="teams/:teamId" element={<Team />} />
<Route path="teams/new" element={<NewTeamForm />} />

如上的兩個路徑，將會匹配 teams/new 。

路徑的正則匹配已被移除。

兼容類組件

在以前版本中，組件的props會包含一個match對象，在其中可以取到路徑參數。

但在最新的 6.x 版本中，無法從 props 獲取參數。

並且，針對類組件的 withRouter 高階組件已被移除。因此對於類組件來說，使用參數有兩種兼容方法：

  • 將類組件改寫為函數組件
  • 自己寫一個 HOC 來包裹類組件，用 useParams 獲取參數後通過 props 傳入原本的類組件

3.2 search 參數

  • 查詢參數不需要在路由中定義
  • 使用 useSearchParams hook 來訪問和修改查詢參數。其用法和 useState 類似，會返回當前對象和更改它的方法
  • 使用 setSearchParams 時，必須傳入所有的查詢參數，否則會覆蓋已有參數
import { useSearchParams } from "react-router-dom";

// 當前路徑為 /foo?id=12
function Foo() {
  const [searchParams, setSearchParams] = useSearchParams();
  console.log(searchParams.get("id")); // 12
  setSearchParams({
    name: "foo",
  }); // /foo?name=foo
  return <div>foo</div>;
}

四、嵌套路由

5.1 路由定義

通過嵌套的書寫Route組件實現對嵌套路由的定義。

path 開頭為 / 的為絕對路徑，反之為相對路徑。

<Routes>
  <Route path="/" element={<Home />}></Route>
  <Route path="/father" element={<Father />}>
    <Route path="child" element={<Child />}></Route>
    <Route path=":name" element={<Another />}></Route>
  </Route>
</Routes>

5.2 在父組件中展示

在父組件中使用Outlet來顯示匹配到的子組件

import { Outlet } from "react-router-dom";
function Father() {
  return (
    <div>
      // ... 自己組件的內容 // 留給子組件Child的出口
      <Outlet />
    </div>
  );
}

5.3 在組件中定義

可以在任何組件中使用 Routes 組件，且組件內的Routes中，路徑默認帶上當前組件的路徑作為前綴。

註意：此時定義父組件的路由時，要在後面加上 /* ，否則父組件將無法渲染。

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="dashboard/*" element={<Dashboard />} />
</Routes>
function Dashboard() {
  return (
    <div>
      <p>Look, more routes!</p>
      <Routes>
        <Route path="/" element={<DashboardGraphs />} />
        <Route path="invoices" element={<InvoiceList />} />
      </Routes>
    </div>
  );
}

五、默認路由

定義： 在嵌套路由中，如果 URL 僅匹配瞭父級 URL，則Outlet中會顯示帶有index屬性的子路由。可以使用在路由的任何層級

<Routes>
  <Route path="/foo" element={Foo}>
    <Route index element={Default}></Route>
    <Route path="bar" element={Bar}></Route>
  </Route>
</Routes>
  • 當 url 為/foo時：Foo 中的 Outlet 會顯示 Default 組件
  • 當 url 為/foo/bar時：Foo 中的 Outlet 會顯示為 Bar 組件

六、全匹配路由

定義：  path屬性取值為*時，可以匹配任何（非空）路徑，該匹配擁有最低的優先級。可以用於設置 404 頁面。

<Routes>
  <Route path="/foo" element={Foo}>
    <Route path="bar" element={Bar}></Route>
    <Route path="*" element={NotFound}></Route>
  </Route>
</Routes>

七、多組路由

通常，一個應用中隻有一個Routes組件。

但根據實際需要也可以定義多個路由出口（如：側邊欄和主頁面都要隨 URL 而變化）

<Router>
  <SideBar>
    <Routes>
      <Route></Route>
    </Routes>
  </SideBar>
  <Main>
    <Routes>
      <Route></Route>
    </Routes>
  </Main>
</Router>

八、路由重定向

當在某個路徑/a下，要重定向到路徑/b時，可以通過Navigate組件進行重定向到其他路徑

等價於以前版本中的Redirect組件

import { Navigate } from "react-router-dom";
function A() {
  return <Navigate to="/b" />;
}

九、佈局路由

當多個路由有共同的父級組件時，可以將父組件提取為一個沒有 path 和 index 屬性的Route組件（Layout Route）

<Route element={<PageLayout />}>
    <Route path="/privacy" element={<Privacy />} />
    <Route path="/tos" element={<Tos />} />
  </Route>

這種寫法等價於：

<Route
  path="/privacy"
  element={
    <PageLayout>
      <Privacy />
    </PageLayout>
  }
/>
<Route
  path="/tos"
  element={
    <PageLayout>
      <Tos />
    </PageLayout>
  }
/>

十、訂閱和操作 history stack的原理

瀏覽器會記錄導航堆棧，以實現瀏覽器中的前進後退功能。在傳統的前端項目中，URL的改變意味著向服務器重新請求數據。

在現在的客戶端路由（ client side routing ）中，可以做到編程控制URL改變後的反應。如在點擊a標簽的回調函數中使用 event.preventDefault() 阻止默認事件，此時URL的改變不會帶來任何UI上的更新。

<a
  href="/contact" rel="external nofollow" 
  onClick={(event) => {
    // stop the browser from changing the URL and requesting the new document
    event.preventDefault();
    // push an entry into the browser history stack and change the URL
    window.history.pushState({}, undefined, "/contact");
  }}
/>

10.1 History對象

瀏覽器沒有直接提供監聽URL改變（push、pop、replace）的接口，因此 react-router 對原生的 history 對線進行瞭包裝，提供瞭監聽URL改變的API。

let history = createBrowserHistory();
history.listen(({ location, action }) => {
  // this is called whenever new locations come in
  // the action is POP, PUSH, or REPLACE
});

使用 react-router 時不需操作History對象（Routes 組件會進行操作）

11.2 Location對象

react-router 對 window.location 進行包裝後，提供瞭一個形式簡潔的Location對象，形如：

{
  pathname: "/bbq/pig-pickins",     // 主機名之後的URL地址
  search: "?campaign=instagram",    // 查詢參數
  hash: "#menu",                    // 哈希值，用於確定頁面滾動的具體位置
  state: null,                      // 對於 window.history.state 的包裝
  key: "aefz24ie"                   // 
}

state

不顯示在頁面上，不會引起刷新，隻由開發人員操作。

可用於記錄用戶的跳轉詳情（從哪跳到當前頁面）或在跳轉時攜帶信息。

可以用在 Link 組件或 navigate 方法中

&lt;Link to="/pins/123" state={{ fromDashboard: true }} /&gt;
let navigate = useNavigate();
navigate("/users/123", { state: partialUser });
復制代碼

在目標的組件中，可以用 useLocation 方法獲取該對象

let location = useLocation();
console.log(location.state);

state中的信息會進行序列化，因此如日期對象等信息會變為string

key

每個Location對象擁有一個唯一的key，可以據此來實現基於Location的滾動管理，或是數據緩存。

如：將 location.key 和 URL 作為鍵，每次請求數據前，先查找緩存是否存在來判斷是否實際發送請求，來實現客戶端數據緩存。

十一、 各類Router組件

11.1 HashRouter和BrowserRouter的區別

  • HashRouter 隻會修改URL中的哈希值部分；而 BrowserRouter 修改的是URL本身
  • HashRouter 是純前端路由，可以通過輸入URL直接訪問；使用時 BrowserRouter 直接輸入URL會顯示404，除非配置Nginx將請求指向對應的HTML文件。初次進入 / 路徑時或點擊 Link 組件跳轉時不會發送請求

11.2 unstable_HistoryRouter

使用 unstable_HistoryRouter 需要傳入一個 history 庫的實例，這將允許在非react作用於下操作history對象。

由於項目使用的history和react-router中使用的history版本可能不一樣，該API目前標為unstable狀態

11.3 MemoryRouter

HashRouter 和 BrowserRouter 都是依據外部對象（history）進行導航，而 MemoryRouter 則是自己存儲和管理狀態堆棧，多用於測試場景。

11.4 NativeRouter

推薦的用於 React Native的Router組件

11.5 StaticRouter

在nodejs端使用，渲染react應用。

import * as React from "react";
import * as ReactDOMServer from "react-dom/server";
import { StaticRouter } from "react-router-dom/server";
import http from "http";

function requestHandler(req, res) {
  let html = ReactDOMServer.renderToString(
    <StaticRouter location={req.url}>
      {/* The rest of your app goes here */}
    </StaticRouter>
  );

  res.write(html);
  res.end();
}

http.createServer(requestHandler).listen(3000);

十二、使用JS對象定義路由：useRoutes

使用 useRoutes hook，可以使用一個JS對象而不是Routes組件與Route組件來定義路由。其功能類似於react-router-config

useRoutes 的返回是 React Element，或是 null。

對於傳入的配置對象， 其類型定義如下：

interface RouteObject {
    caseSensitive?: boolean;
    children?: RouteObject[];
    element?: React.ReactNode;
    index?: boolean;
    path?: string;
}

到此這篇關於react-router-dom v6 使用詳細示例的文章就介紹到這瞭,更多相關react-router-dom v6 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：