網站首頁編程語言正文

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

作者：日拱一寸 ? 更新時間： 2022-11-04 編程語言

一、基本使用

首先安裝依賴：

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屬性取值為*時，可以匹配任何（非空）路徑，該匹配擁有最低的優先級?？梢杂糜谠O置 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"  
  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;
}

原文鏈接：https://juejin.cn/post/7142141069096910855

上一篇：C#序列化與反序列化集合對象并進行版本控制_C#教程
下一篇：React項目中使用Redux的?react-redux_R

日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

網站首頁編程語言正文

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

目錄

一、基本使用

二、路由跳轉

2.1 Link 組件

2.2 NavLink 組件

2.3 編程式跳轉

三、動態路由參數

3.1 路徑參數

路徑匹配規則

兼容類組件

3.2 search 參數

四、嵌套路由

5.1 路由定義

5.2 在父組件中展示

5.3 在組件中定義

五、默認路由

六、全匹配路由

七、多組路由

八、路由重定向

九、布局路由

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

10.1 History對象

11.2 Location對象

state

key

十一、各類Router組件

11.1 HashRouter和BrowserRouter的區別

11.2 unstable_HistoryRouter

11.3 MemoryRouter

11.4 NativeRouter

11.5 StaticRouter

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

相關推薦

日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

網站首頁 編程語言 正文

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

目錄

一、基本使用

二、路由跳轉

2.1 Link 組件

2.2 NavLink 組件

2.3 編程式跳轉

三、動態路由參數

3.1 路徑參數

路徑匹配規則

兼容類組件

3.2 search 參數

四、嵌套路由

5.1 路由定義

5.2 在父組件中展示

5.3 在組件中定義

五、默認路由

六、全匹配路由

七、多組路由

八、路由重定向

九、布局路由

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

10.1 History對象

11.2 Location對象

state

key

十一、 各類Router組件

11.1 HashRouter和BrowserRouter的區別

11.2 unstable_HistoryRouter

11.3 MemoryRouter

11.4 NativeRouter

11.5 StaticRouter

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

相關推薦

網站首頁編程語言正文

二、路由跳轉

三、動態路由參數

四、嵌套路由

六、全匹配路由

七、多組路由

九、布局路由

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

十一、各類Router組件

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