React-router 常用组件及hook整理总结BrowserRouter、HashRouter、Routes、Ro

一、路由容器组件

1. `BrowserRouter`

作用：基于 HTML5 History API 的路由容器，提供干净的 URL（无 # 符号）。
使用场景：
- 需要美观的 URL（如 /students）。
- 需要服务器配置支持（生产环境需处理所有路径返回 index.html）。

示例：

import { BrowserRouter } from 'react-router-dom';
function App() {
  return (
    <BrowserRouter>
      {/* 其他路由组件 */}
    </BrowserRouter>
  );
}

2. `HashRouter`

作用：基于 URL Hash 的路由容器（URL 如 /#/students）。
使用场景：
- 静态文件服务器（无需服务器配置）。
- 临时项目或兼容旧环境。

示例：

import { HashRouter } from 'react-router-dom';
function App() {
  return (
    <HashRouter>
      {/* 其他路由组件 */}
    </HashRouter>
  );
}

二、路由配置组件

1. `Routes` 和 `Route`

Routes：包裹所有 Route 组件，根据当前路径匹配最佳路由。
Route：定义路径与组件的映射关系。
使用场景：配置页面路由规则。
常用参数：
- path：匹配的 URL 路径（支持动态参数，如 /student/:id）。
- element：匹配后渲染的组件（直接传递组件实例，如 <Student />）。

示例：

import { Routes, Route } from 'react-router-dom';
function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/students" element={<StudentList />} />
      <Route path="/students/:id" element={<StudentDetail />} />
    </Routes>
  );
}

2.`useRoutes`

作用：通过 JavaScript 对象（路由数组）配置路由，替代直接编写 <Route> 组件，适合集中管理复杂路由。
使用场景：
- 需要动态生成路由（如权限路由）。
- 路由配置集中管理，提升可维护性。
参数：
- 一个路由数组对象，结构与 <Route> 组件属性一致（如 path、element、children）。

示例：

// 在 App.js 中定义路由
import { useRoutes } from 'react-router-dom';
const routes = [
  { path: '/', element: <Home /> },
  { 
    path: '/students', 
    element: <StudentLayout />,
    // 嵌套路由
    children: [
      { index: true, element: <StudentList /> }, // 默认子路由
      { path: ':id', element: <StudentDetail /> },
    ],
  },
];
function App() {
  const routing = useRoutes(routes);
  return routing;
}

3.`Navigate`

作用：用于重定向到其他路由。
使用场景：
- 未登录时跳转到登录页。
- 表单提交后跳转到结果页。
常用参数：
- to：目标路径。
- replace：是否替换当前历史记录（默认 false，即添加新记录）。

示例：

import { Navigate } from 'react-router-dom';
function PrivateRoute({ isLoggedIn }) {
  return isLoggedIn ? <Dashboard /> : <Navigate to="/login" replace />;
}

4.`NavLink`

作用：导航链接，可自动添加激活状态的类名或样式。
使用场景：导航菜单的高亮显示。
常用参数：
- to：目标路径。
- className / style：可接收函数，参数为 { isActive }。
- end：精确匹配子路径（如父路由激活时，子路由不继承激活状态）。

示例：

import { NavLink } from 'react-router-dom';
function NavBar() {
  return (
    <NavLink
      to="/students"
      className={({ isActive }) => isActive ? 'active' : ''}
      end
    >
      Students
    </NavLink>
  );
}

三、嵌套路由与 `Outlet`

1. 嵌套路由配置

作用：将子页面嵌套在父路由中，共享布局（如导航栏）。
实现方式：
- 在父路由的 Route 或 useRoutes 配置中使用 children 属性定义子路由。
- 子路由的路径会自动拼接到父路由路径后（如 /students/:id）。

示例：

jsx

复制

// 使用 Route 组件配置嵌套路由
<Route path="/students" element={<StudentLayout />}>
  <Route index element={<StudentList />} />       // 路径：/students
  <Route path=":id" element={<StudentDetail />} /> // 路径：/students/123
</Route>

2. `Outlet` 组件

作用：在父组件中标记子路由的渲染位置，类似 Vue 的 <router-view>。
使用场景：父组件需要固定布局（如侧边栏+内容区）。

示例：

// 父组件 StudentLayout.js
import { Outlet } from 'react-router-dom';
function StudentLayout() {
  return (
    <div>
      <h1>学生管理</h1>
      <nav>{/* 导航链接 */}</nav>
      {/* 子路由组件将在此处渲染 */}
      <Outlet />  
    </div>
  );
}

四、Hooks

1. `useLocation`

作用：获取当前路由的 location 对象。
常用属性：
- pathname：当前路径（如 /students/123）。
- search：URL 查询参数（如 ?name=John）。
- hash：URL 哈希值（如 #section）。

示例：

import { useLocation } from 'react-router-dom';
function StudentDetail() {
  const location = useLocation();
  console.log(location.pathname); // 输出当前路径
  return <div>Current Path: {location.pathname}</div>;
}

2. `useNavigate`

作用：编程式导航，返回一个用于跳转的函数。
常用方法：
- navigate(path, options)：
  - path：目标路径。
  - options：可配置 replace: true（替换历史记录）或 state: {}（传递状态数据）。

示例：

import { useNavigate } from 'react-router-dom';
function LoginButton() {
  const navigate = useNavigate();
  const handleLogin = () => {
    navigate('/dashboard', { replace: true, state: { user: 'John' } });
  };
  return <button onClick={handleLogin}>Login</button>;
}

3. `useParams`

作用：获取 URL 中的动态参数（如 :id）。
使用场景：从路径中提取参数（如学生 ID）。

示例：

import { useParams } from 'react-router-dom';
function StudentDetail() {
  const { id } = useParams();
  return <div>Student ID: {id}</div>;
}

四、总结表格

组件/Hook	作用	核心参数/方法
`BrowserRouter`	提供基于 History API 的路由	无
`HashRouter`	提供基于 Hash 的路路	无
`Routes`	包裹所有路由规则	无
`Route`	定义路径与组件的映射	`path`, `element`
`Navigate`	重定向到其他路由	`to`, `replace`
`NavLink`	导航链接（支持激活状态）	`to`, `className/style`, `end`
`useLocation`	获取当前路由信息	`pathname`, `search`, `hash`
`useNavigate`	编程式导航	`navigate(path, options)`
`useParams`	获取 URL 动态参数	返回参数对象（如 `{ id }`）
`useRoutes`	通过对象配置路由	路由数组（含 `path`, `element`, `children`）
`Outlet`	标记嵌套路由的渲染位置	无

React-router 常用组件及hook整理总结

一、路由容器组件

1. BrowserRouter

2. HashRouter

二、路由配置组件

1. Routes 和 Route

2.useRoutes

3.Navigate

4.NavLink

三、嵌套路由与 Outlet

1. 嵌套路由配置

2. Outlet 组件

四、Hooks

1. useLocation

2. useNavigate

3. useParams

四、总结表格

1. `BrowserRouter`

2. `HashRouter`

1. `Routes` 和 `Route`

2.`useRoutes`

3.`Navigate`

4.`NavLink`

三、嵌套路由与 `Outlet`

2. `Outlet` 组件

1. `useLocation`

2. `useNavigate`

3. `useParams`