404 – 页面未找到

抱歉，你访问的页面不存在。

    <hr />

    <Routes>
      {/* ... 其他 Route ... */}
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
      <Route path="/users/:userId" element={<UserProfile />} />

      {/* 嵌套路由示例 */}
      <Route path="/dashboard" element={<DashboardLayout />}>
        <Route path="overview" element={<DashboardOverview />} />
        <Route path="settings" element={<DashboardSettings />} />
        <Route index element={<DashboardOverview />} />
      </Route>

      {/* 404 路由：放在所有其他路由之后 */}
      <Route path="*" element={<NotFound />} />

    </Routes>
  </div>
</BrowserRouter>

);
}

export default App;
“`

现在，当你访问任何未匹配上述路径的 URL 时（例如 /non-existent-page），你将会看到“404 – 页面未找到”的内容。

程序化导航：useNavigate 钩子

除了点击 Link 或 NavLink 进行导航外，有时我们需要在代码中触发导航，例如：

• 用户成功登录后跳转到仪表盘。
• 用户提交表单后跳转到详情页。
• 点击一个按钮来返回上一页。

react-router-dom 提供了 useNavigate 钩子来实现程序化导航。

1. 在组件中使用 useNavigate:

“`jsx
// src/pages/DashboardOverview.jsx (示例，添加一个按钮用于导航)
import React from ‘react’;
import { useNavigate } from ‘react-router-dom’;

function DashboardOverview() {
const navigate = useNavigate();

const handleGoToSettings = () => {
// 使用 navigate 函数进行导航
// navigate(‘/dashboard/settings’); // 绝对路径
navigate(‘settings’); // 相对路径 (推荐在嵌套路由中使用相对路径)
};

const handleGoHome = () => {
navigate(‘/’); // 导航回首页
};

const handleGoBack = () => {
navigate(-1); // 导航回上一页 (相当于点击浏览器后退按钮)
};

const handleReplaceHistory = () => {
// 导航并替换当前历史记录，用户无法通过后退按钮返回当前页
navigate(‘/contact’, { replace: true });
};

const handleNavigateWithState = () => {
    // 导航并传递 state 数据，可以在目标页面通过 useLocation 获取
    navigate('/about', { state: { from: 'dashboard', data: 123 } });
};

return (

);
}

export default DashboardOverview;
“`

navigate 函数的用法：

• navigate(to): 导航到指定的路径 to。to 可以是字符串（绝对路径或相对路径），也可以是一个数字（例如 navigate(-1) 表示后退一页，navigate(1) 表示前进一页）。
• navigate(to, { replace: true }): 导航到指定路径，但不是将新路径添加到历史记录中，而是替换掉当前的历史记录。常用于登录成功后，不希望用户通过后退回到登录页。
• navigate(to, { state: data }): 导航到指定路径，并附带一些 state 数据。这些数据可以在目标页面通过 useLocation 钩子获取。

其他常用钩子

除了 useParams 和 useNavigate，react-router-dom 还提供了其他一些有用的钩子：

• useLocation: 返回一个 location 对象，表示当前 URL 的信息，包括 pathname (路径名), search (查询字符串，如 ?key=value), hash (URL 哈希), 和 state (通过 navigate 传递的状态)。
  “`jsx
  import { useLocation } from ‘react-router-dom’;

  function CurrentPageInfo() {
  const location = useLocation();

  console.log(location.pathname); // ‘/about’
  console.log(location.search); // ‘?query=test’
  console.log(location.hash); // ‘#section’
  console.log(location.state); // { from: ‘dashboard’, data: 123 } (如果navigate时传递了state)

  // 解析查询参数
  const queryParams = new URLSearchParams(location.search);
  console.log(queryParams.get(‘query’)); // ‘test’

  return (

  当前路径: {location.pathname}

  查询参数: {location.search}

  哈希: {location.hash}

  {location.state &&

  State 数据: {JSON.stringify(location.state)}

  }

  );
  }
  * **`useMatch`**: 检查当前 `location` 是否与给定的路径模式匹配。它返回一个匹配对象（如果匹配成功）或 `null`（如果匹配失败）。这对于需要在渲染时判断当前路径是否与某个模式匹配的情况很有用。jsx
  import { useMatch } from ‘react-router-dom’;

  function ConditionalComponent() {
  // 检查当前路径是否匹配 /users/:userId
  const match = useMatch(‘/users/:userId’);

  if (match) {
  // match.params 包含提取的参数
  console.log(“匹配的用户 ID:”, match.params.userId);
  return

  当前正在查看用户 ID 为 {match.params.userId} 的详情。

  ;
  }

  return

  当前不在用户详情页。

  ;
  }
  “`

高级概念（简述）

• Layout Routes: 在嵌套路由中，父级 Route 不指定 path 属性，只提供 element 属性，并在其内部定义子 Route。这种方式可以方便地将通用布局应用于一组子路由，而不需要父级路径前缀。
  jsx
<Routes>
{/* 这是一个布局路由 */}
<Route element={<AppLayout />}>
{/* 这些子路由将使用 AppLayout */}
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Route>
</Routes>
  这里的 <AppLayout> 组件内部需要包含 <Outlet /> 来渲染匹配到的子路由组件。

• 身份验证与路由保护: 实际应用中，很多页面需要用户登录后才能访问。你可以创建一个高阶组件或一个自定义路由组件来检查用户登录状态，如果未登录，则重定向到登录页。结合 useNavigate 或 Navigate 组件可以实现路由保护。
  “`jsx
  import { Navigate, Outlet } from ‘react-router-dom’;
  import { useAuth } from ‘./authContext’; // 假设你有一个认证上下文

  function ProtectedRoute() {
  const auth = useAuth(); // 获取认证状态

  // 如果未登录，重定向到登录页
  if (!auth.user) {
  return ;
  }

  // 如果已登录，渲染子路由内容
  return ;
  }

  // 在你的 Routes 中使用
  
  } />
  {/ 使用 ProtectedRoute 包裹需要保护的路由 /}
  }>
  } />
  } />
  {/ … 其他需要保护的路由 … /}
  
  {/ … 其他公共路由 … /}
  
  “`

• Code Splitting (代码分割): 对于大型应用，一次性加载所有路由对应的组件可能会导致初始加载时间过长。react-router-dom 可以与 React.lazy 和 Suspense 结合使用，实现路由级别的代码分割，按需加载组件。
  “`jsx
  import React, { Suspense } from ‘react’;
  import { BrowserRouter, Routes, Route } from ‘react-router-dom’;

  // 使用 React.lazy 动态导入组件
  const Home = React.lazy(() => import(‘./pages/Home’));
  const About = React.lazy(() => import(‘./pages/About’));

  function App() {
  return (
  
  {/ Suspense 提供加载时的 fallback /}
  Loading…\