React Router 用法

React 使得開(kāi)發(fā)者能夠輕松地創(chuàng)建交互式的單頁(yè)應(yīng)用（SPA），單頁(yè)應(yīng)用的一個(gè)常見(jiàn)挑戰(zhàn)是如何處理頁(yè)面導(dǎo)航和路由嗎，React Router 就是解決這個(gè)問(wèn)題的工具

路由（Router）是 React Router 的核心概念當(dāng) URL 匹配某個(gè)路由時(shí)，React Router 會(huì)渲染該路由對(duì)應(yīng)的組件。
React Router 會(huì)根據(jù) URL 和路由的匹配規(guī)則來(lái)決定哪個(gè)組件需要渲染。匹配規(guī)則支持動(dòng)態(tài)參數(shù)、正則匹配等。
并且React Router 允許你在一個(gè)路由內(nèi)部嵌套另一個(gè)路由，從而實(shí)現(xiàn)更復(fù)雜的界面結(jié)構(gòu)。

用法

導(dǎo)入 BrowserRouter 組件，并將其包裹在應(yīng)用的根組件外部

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

BrowserRouter 和 HashRouter
BrowserRouter使用 HTML5 的 History API（如 pushState 和 replaceState）來(lái)實(shí)現(xiàn)無(wú)哈希的干凈 URL。類(lèi)似于常見(jiàn)的 URL，例如：https://example.com/about 每次路徑發(fā)生變化時(shí)，它會(huì)使用 History API 修改瀏覽器的地址欄，而不刷新頁(yè)面。
HashRouter 使用 URL 的哈希部分（#）進(jìn)行路由管理，依賴(lài)瀏覽器的 hashChange 事件。URL 包含 # 符號(hào)，例如：https://example.com/#/about
HashRouter 把路徑存儲(chǔ)在 URL 的哈希部分，瀏覽器不會(huì)將哈希部分發(fā)送到服務(wù)器，因此頁(yè)面不會(huì)刷新。URL 的哈希部分變化時(shí)，HashRouter 會(huì)攔截這些變化并更新頁(yè)面。
browserRouter需要后端支持，服務(wù)器必須配置將所有請(qǐng)求指向入口文件(index.html);而HashRouter則直接在客戶(hù)端處理，無(wú)需后端支持

使用Route定義路由

使用 Route 組件可以定義路由。每個(gè) Route 組件都需要一個(gè) path 屬性，表示匹配的 URL 路徑，以及一個(gè) element 屬性，表示在該路徑匹配時(shí)需要渲染的組件。
React Router 允許你根據(jù)用戶(hù)的身份、權(quán)限等條件來(lái)實(shí)現(xiàn)路由守衛(wèi)和重定向功能。例如，使用 Navigate 組件可以實(shí)現(xiàn)頁(yè)面重定向：

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Home from './Home';
import About from './About';
function App() {
  return (
    <div>
      <Routes>
        <Route path="/hone" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<Navigate to={`/home`}/>}/>
      </Routes>
    </div>
  );
}

當(dāng)用戶(hù)訪問(wèn) / 路徑時(shí)，Home 組件將被渲染；當(dāng)訪問(wèn) /about 路徑時(shí)，About 組件將被渲染。到其他路由，會(huì)被重定向到/home

嵌套路由

嵌套路由可以使用 Route 的 children 屬性或者在 Route 內(nèi)部定義子路由來(lái)實(shí)現(xiàn)

function App() {
  return (
    <Routes>
      <Route path="/dashboard" element={<Dashboard />}>
        <Route path="settings" element={<Settings />} />
      </Route>
    </Routes>
  );
}

在這個(gè)例子中，/dashboard/settings 路徑將渲染 Settings 組件，而 /dashboard 將渲染 Dashboard 組件

使用參數(shù)

React Router 允許在路由路徑中使用動(dòng)態(tài)參數(shù)并且可以通過(guò) useParams 鉤子獲取

import React from 'react';
import { useParams } from 'react-router-dom';
function User() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}
function App() {
  return (
    <Routes>
      <Route path="/user/:id" element={<User />} />
    </Routes>
  );
}

在上面的例子中，/user/:id 路徑中的 :id 就是一個(gè)動(dòng)態(tài)參數(shù)。訪問(wèn) /user/123 時(shí)，User 組件將渲染并顯示 User ID: 123。

到此這篇關(guān)于React Router 用法概覽的文章就介紹到這了,更多相關(guān)React Router 用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論