React Router(react-router-dom V6 整理)

本文轉載自查看原文 2022-04-11 09:54 7160 React

官方文檔

一個神奇的鏈接: React Router 官方文檔

安裝

運行以下命令安裝React Router:

npm install react-router-dom@6 --save

注意：react-router-dom 包含所有內容，導入組件時應該從react-router-dom中導入，而不應該從 react-router中導入，否則，會意外地在應用中導入不匹配的庫版本；

基本用法

在Web應用程序中開啟 React Router 功能

// index.js

import React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container);
root.render(
  // 通過在應用入口添加 BrowserRouter 組件開啟 React Router 功能
  <BrowserRouter>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </BrowserRouter>
);

注意：web 應用程序中一般使用 BrowserRouter 組件, 還用另一種 HashRouter 組件方式;
這兩種方式的區別:

底層原理不一樣：
BrowserRouter調用的是 H5 history API,低版本兼容性問題;
HashRouter 使用的是 URL 哈希值;
地址欄表現形式不一樣：
BrowserRouter的路徑：localhost:3000/index
HashRouter的路徑：localhost:3000/#/index
刷新后對路由 state 參數的影響
BrowserRouter沒有任何影響，因為 state 保存在 history 對象中
HashRouter刷新后會導致路由 state 參數的丟失

值得注意的是，官方強烈建議不要使用 HashRouter;

配置路由

點擊查看代碼

// App.js

// 導入 Route, Routes 組件
import { Route, Routes } from 'react-router-dom';

function App() {
  return (
    <Routes>
	  {/* 頁面默認導航到 Home 組件(頁面上顯示 Home Compontent) */}
      <Route path='/' element={<Home />} />
	  {/* 在地址輸入 http://localhost:3000/about 導航到 About 組件(頁面上顯示 About Compontent) */}
      <Route path='/about' element={<About />} />
    </Routes>
  );
}

const Home = (props) => {
  return <div>Home Compontent</div>;
}

const About = (props) => {
  return <div>About Compontent</div>;
}

export default App;

在以前版本的 React Router 中，必須以某種方式對路由進行排序，以便在多個路由與不明確的 URL 匹配時獲得要呈現的正確路由。V6更智能，會選擇最具體的匹配；

添加 "不匹配" 路由

點擊查看代碼

// App.js

import { Route, Routes } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path='/' element={<Home />} />
      <Route path='/about' element={<About />} />
      {/* 當沒有其他路由與 URL 匹配時，匹配 path='*'的路由 */}
      <Route path='*' element={<NotFount />} />
    </Routes>
  );
}

const Home = (props) => {
  return <div>Home Compontent</div>;
}

const About = (props) => {
  return <div>About Compontent</div>;
}

const NotFount = (props) => {
  return <div>NotFount !!!</div>;
}

export default App;

當沒有其他路由與 URL 匹配時，才會匹配 path='*'路由。此路由將匹配任何 URL，但優先級最弱，因此路由器僅在沒有其他路由匹配時才會選擇它;

使用鏈接導航

點擊查看代碼

// App.js

// 導入 Link 組件
import { Route, Routes, Link } from 'react-router-dom';

function App() {
  return (
    <Routes>
	  {/* 頁面默認導航到 Home 組件(渲染 Home 組件, 頁面顯示 About Compontent 鏈接) */}
      <Route path='/' element={<Home />} />
      <Route path='/about' element={<About />} />
    </Routes>
  );
}

const Home = (props) => {
  return <div>
    {/* 點擊 About Link 鏈接跳轉至 http://localhost:3000/about
        畫面顯示 About 組件內容(Home Link鏈接)
      */}
    <Link to='/about'>About Link</Link>
  </div>;
}

const About = (props) => {
  return <div>
    {/* 點擊 Home Link 鏈接跳轉至 http://localhost:3000/
        畫面顯示 Home 組件內容(About Link鏈接)
      */}
    <Link to='/'>Home Link</Link>
  </div>;
}

export default App;

使用嵌套路由

點擊查看代碼

// App.js

// 導入 Link, Outlet 組件
import { Route, Routes, Link, Outlet } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path='/' element={<Home />} >
        <Route path='about' element={<About />} />
        <Route path='setting' element={<Setting />} />
        {/* 默認子路由
            如果導航欄地址為 http://localhost:3000，此時子路由渲染位置(Outlet)為空白,
            增加以下配置，子路由渲染位置(Outlet)渲染 <List />
         */}
        <Route index element={<List />} />
      </Route>
    </Routes>
  );
}

const Home = (props) => {
  return <>
    <div>
      <Link to='/about'>About Link</Link> | {" "}
      <Link to='/setting'>Setting Link</Link>
    </div>
    <div style={{padding: '20px', margin: '10px', borderTop: '1px solid'}}>
      {/* Outlet 為嵌套子路由的出口，比如：點擊 About Link 鏈接，
          瀏覽器地址變為 http://localhost:3000/about
          在此渲染路由地址為 /about 的組件(在此顯示: About Compontent)
       */}
      <Outlet />
    </div>
  </>;
}

const About = (props) => {
  return <div>
    About Compontent
  </div>;
}

const Setting = (props) => {
  return <div>
    Setting Compontent
  </div>;
}

const List = (props) => {
  return <div>
    List Compontent
  </div>;
}

export default App;

這是 React Router 最強大的功能之一，在實際開發中，大多數 UI 都是一系列嵌套布局，React Router 通過這種嵌套路由的方式實現了一些自動、持久的布局處理；

使用活動鏈接

點擊查看代碼

// App.js

// 導入 NavLink 組件
import { Route, Routes, NavLink, Outlet } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path='/' element={<Home />} >
        <Route path='about' element={<About />} />
        <Route path='setting' element={<Setting />} />
        <Route index element={<List />} />
      </Route>
    </Routes>
  );
}

const Home = (props) => {
  return <>
    <div>
      {/* <NavLink /> 接收一個style 或者 className 屬性
          屬性值為一個回調函數，可以通過 isActive 的值判斷
          鏈接是否處於活動狀態，從而實現給活動鏈接節點添加樣式的效果
          示例效果：點擊哪個鏈接，目標鏈接字體變紅
       */}
      <NavLink
        style={({ isActive }) => navColor(isActive)}
        to='/about'
      >
        About Link
      </NavLink> | {" "}
      <NavLink
        style={({isActive}) => navColor(isActive)}
        to='/setting'
      >
        Setting Link
      </NavLink>
    </div>
    <div style={{ padding: '20px', margin: '10px', borderTop: '1px solid' }}>
      <Outlet />
    </div>
  </>;
}

const About = (props) => {
  return <div>
    About Compontent
  </div>;
}

const Setting = (props) => {
  return <div>
    Setting Compontent
  </div>;
}

const List = (props) => {
  return <div>
    List Compontent
  </div>;
}

const navColor = (isActive) => {
  return {color: isActive ? 'red' : ""}
}

export default App;

主要實現了給當前激活的鏈接設置一個式樣，支持 style 和 className 這兩種屬性；

讀取 URL 參數

點擊查看代碼

// 導入 useParams 組件
import { Route, Routes, NavLink, Outlet, useParams } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path='/' element={<Home />} >
        <Route path='list' element={<List />} >
          <Route path=':id' element={<Item />} />
        </Route>
      </Route>
    </Routes>
  );
}

const Home = (props) => {
  return <>
    <div>
      <NavLink
        style={({ isActive }) => navColor(isActive)}
        to='/list'
      >
        List Link
      </NavLink>
    </div>
    <div style={{ padding: '20px', margin: '10px', borderTop: '1px solid' }}>
      <Outlet />
    </div>
  </>;
}

const Item = (props) => {
  // 從 URL 獲取參數：:id
  const params = useParams();
  return <h2>Item: {params.id}</h2>;
}

const List = (props) => {
  const list = [
    {
      name: "趙雲",
      no: 100
    },
    {
      name: "馬超",
      no: 101
    }
  ]
  return <div>
    {list.map((item) => {
      return (<NavLink
        style={({isActive}) => navColor(isActive)}
        to={`/list/${item.no}`}
        key={item.no}
      >
        {item.name}
      </NavLink>)
    })}
    <div className='content'>
      {/* 指定子路由 /list/? 的渲染位置 */}
      <Outlet />
    </div>
  </div>;
}

const navColor = (isActive) => {
  return {
    color: isActive ? 'red' : "",
    marginRight: '10px'
  }
}

export default App;

與 V5 的區別

<Routes> 替代 <Switch>
寫法上的比較：

// v5 寫法
// 引入 react-router
import { Route, Switch } from 'react-router-dom';
function App() {
  return (
	  <Switch>
		{/* 路由配置 */}
	  </Switch>
  );
}

// v6 寫法
import { Route, Routes } from 'react-router-dom';
function App() {
  return (
	  // Routes 替換 Switch
	<Routes> 
	  {/* 路由配置 */}
	</Routes>
  );
}

v6 的優點：
v6 提供了功能更強大的 Routes 組件來代替 Switch 組件，Routes 不再按順序匹配路徑，而是采用了一種自動匹配最佳路徑的方法；

<Route> 不再支持子組件，改為使用 element 屬性；並且不再需要 exact 屬性了
寫法上的比較：

// v5 寫法
// 引入 react-router
import { Route, Switch } from 'react-router-dom';
function App() {
  return (
	  <Switch>
		<Route exact path='/home'>
		  <Home />
		</Route>
	  </Switch>
  );
}

// v6 寫法
import { Route, Routes } from 'react-router-dom';
function App() {
  return (
	<Routes>
	  <Route path='/home' element={<Home /> } />
	</Routes>
  );
}

v6 的優點：

v6 提供的 element 屬性, 可以使開發者更加方便的注入想要的 props;
v6 中的 path 屬性是相對的；
可以按照所需的任何順序放置路由，路由器將自動檢測當前URL的最佳路由；

移除了 <NavLink> 的 activeClassName 屬性
v6寫法：

import { NavLink } from 'react-router-dom';
function App() {
  return (
	<>
	  {/* className 寫法 */}
	  <NavLink 
		className={({isActive}) => {
		  return isActive ? "highlight" : "";
		}} 
		to="home">Home</NavLink>
	  {/* style 寫法 */}
	  <NavLink 
		to="about"
		style={({isActive}) => {
		  return {
			color: isActive ? "red" : ""
		  }
		}}
	  >About</NavLink>
	</>
  );
}

移除 <Redirect>，改為使用 <Navigate>
寫法上的對比：

// v6 寫法
import { Navigate, Route, Routes } from 'react-router-dom';
function App() {
  return (
	<Routes>
	  <Route path='/' element={<Navigate replace to="/home" />} /> 
	</Routes>
  );
}

<Link to>支持相對位置

// 配置路由
<Route path="app">
	    <Route path="home">
	        <Route path="list" />
	    </Route>
</Route>

// 當前 URL 是 /app/home
<Link to="list">               => <a href="/app/home/list">
<Link to="../list">            => <a href="/app/list">
<Link to="../../list">         => <a href="/list">
<Link to="../../../list">      => <a href="/list">

新增 <Outlet>
關於 <Outlet>，參考本文的嵌套路由節點; 此組件是一個占位符，告訴 React Router 嵌套的內容應該放到哪里; 通過 <Outlet> 可以將所有的路由(嵌套的子路由)配置合並在一起，可進行路由的統一管理，增加了代碼可維護性;

使用 useNavigate 實現編程式導航，從而代替 useHistory

// v6 寫法
import { useNavigate } from 'react-router-dom';
function App() {
  const navigate = useNavigate();

  const handleClick = () => {
	navigate('/home');  // push
	// 重定向
	// navigate('/home', {replace: true});
  };

  return (
	<div>
	  <button onClick={handleClick}>返回首頁</button>
	</div>
  );
}

主要寫法變更：

history.push("/") => navigate("/")
history.replace("/") => navigate("/",{ replace: true })
history.goBack() => navigate(-1)
history.goForward() => navigate(1)
history.go(2) => navigate(2)

一系列的 Hooks

hooks名	作用	說明
`useParams`	返回當前參數	根據路徑讀取參數
`useNavigate`	返回當前路由	代替原有V5中的 useHistory
`useOutlet`	返回根據路由生成的element
`useLocation`	返回當前的location 對象
`useRoutes`	同Routers組件一樣，只不過是在js中使用
`useSearchParams`	用來匹配URL中?后面的搜索參數

總結

本文主要記錄了一下 React Router V6 的一些基本用法以及對V5的比較，有了這些知識的支撐，足以應付大多數日常開發了；v6 版本基於全新的路由算法帶來強大的功能和 hooks，並且重新實現了 useNavigate 來替代 useHistory ，整體上更加好理解；
先記錄這么多，后續持續更新！！！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 React-router-dom v6 react-router-dom v6 react-router-dom 在hook中的使用 v6 和 v5的對比 react-router-dom v6版本中的withRouter和Switch已過時在v6版本的react-router-dom中如何進行默認選擇 react-router-dom v4 react-router-dom 的基本使用 react @types/react-router-dom報錯 react-router-dom v^4路由、帶參路由的配置 react 路由使用react-router-dom