当前位置：首页 > article >正文

React Router 用法概览

article 2025/1/6 8:54:16

React Router 用法

React 使得开发者能够轻松地创建交互式的单页应用（SPA），单页应用的一个常见挑战是如何处理页面导航和路由吗，React Router 就是解决这个问题的工具

路由（Router）是 React Router 的核心概念当 URL 匹配某个路由时，React Router 会渲染该路由对应的组件。
React Router 会根据 URL 和路由的匹配规则来决定哪个组件需要渲染。匹配规则支持动态参数、正则匹配等。
并且React Router 允许你在一个路由内部嵌套另一个路由，从而实现更复杂的界面结构。

用法

导入 BrowserRouter 组件，并将其包裹在应用的根组件外部

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）来实现无哈希的干净 URL。类似于常见的 URL，例如：https://example.com/about 每次路径发生变化时，它会使用 History API 修改浏览器的地址栏，而不刷新页面。
HashRouter 使用 URL 的哈希部分（#）进行路由管理，依赖浏览器的 hashChange 事件。URL 包含 # 符号，例如：https://example.com/#/about
HashRouter 把路径存储在 URL 的哈希部分，浏览器不会将哈希部分发送到服务器，因此页面不会刷新。URL 的哈希部分变化时，HashRouter 会拦截这些变化并更新页面。
browserRouter需要后端支持，服务器必须配置将所有请求指向入口文件(index.html);而HashRouter则直接在客户端处理，无需后端支持

使用Route定义路由
使用 Route 组件可以定义路由。每个 Route 组件都需要一个 path 属性，表示匹配的 URL 路径，以及一个 element 属性，表示在该路径匹配时需要渲染的组件。
React Router 允许你根据用户的身份、权限等条件来实现路由守卫和重定向功能。例如，使用 Navigate 组件可以实现页面重定向：

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 内部定义子路由来实现

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

在这个例子中，/dashboard/settings 路径将渲染 Settings 组件，而 /dashboard 将渲染 Dashboard 组件

使用参数
React Router 允许在路由路径中使用动态参数并且可以通过 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>
  );
}