React Router 用法

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

路由（Router）是 React Router 的核心概念當 URL 匹配某個路由時，React Router 會渲染該路由對應(yīng)的組件。
React Router 會根據(jù) URL 和路由的匹配規(guī)則來決定哪個組件需要渲染。匹配規(guī)則支持動態(tài)參數(shù)、正則匹配等。
并且React Router 允許你在一個路由內(nèi)部嵌套另一個路由，從而實現(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）來實現(xiàn)無哈希的干凈 URL。類似于常見的 URL，例如：https://example.com/about 每次路徑發(fā)生變化時，它會使用 History API 修改瀏覽器的地址欄，而不刷新頁面。
HashRouter 使用 URL 的哈希部分（#）進行路由管理，依賴瀏覽器的 hashChange 事件。URL 包含 # 符號，例如：https://example.com/#/about
HashRouter 把路徑存儲在 URL 的哈希部分，瀏覽器不會將哈希部分發(fā)送到服務(wù)器，因此頁面不會刷新。URL 的哈希部分變化時，HashRouter 會攔截這些變化并更新頁面。
browserRouter需要后端支持，服務(wù)器必須配置將所有請求指向入口文件(index.html);而HashRouter則直接在客戶端處理，無需后端支持

使用Route定義路由

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

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>
  );
}

當用戶訪問 / 路徑時，Home 組件將被渲染；當訪問 /about 路徑時，About 組件將被渲染。到其他路由，會被重定向到/home

嵌套路由

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

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

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

使用參數(shù)

React Router 允許在路由路徑中使用動態(tài)參數(shù)并且可以通過 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 就是一個動態(tài)參數(shù)。訪問 /user/123 時，User 組件將渲染并顯示 User ID: 123。

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

最新評論