<Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/dashboard" element={<Dashboard />}>
        <Route index element={<DashboardHome />} />
        <Route path="settings" element={<DashboardSettings />} />
      </Route>
      <Route path="/users/:userId" element={<UserDetail />} />

      {/* 404 Route - 放在最后 */}
      {/* path="*" 会匹配任何未被上面 Route 匹配的路径 */}
      <Route path="*" element={<NotFound />} />

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

{/ … 导航 /}

---

    <Routes>
      {/* ... 其他 Route */}
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/dashboard" element={<Dashboard />}>
        <Route index element={<DashboardHome />} />
        <Route path="settings" element={<DashboardSettings />} />
      </Route>
      <Route path="/users/:userId" element={<UserDetail />} />

      {/* 重定向示例 */}
      {/* 当路径匹配 "/old-about" 时，不渲染任何组件，而是直接导航到 "/about" */}
      <Route path="/old-about" element={<Navigate to="/about" replace />} /> {/* replace prop 类似 navigate({ replace: true }) */}

      {/* 404 Route */}
      <Route path="*" element={<NotFound />} />

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

);
}

export default App;
“`

现在，当你访问 /old-about 或点击“旧关于页面”链接时，URL 会自动变为 /about，并显示 About 页面内容。

你也可以在组件内部根据条件进行重定向：

“`javascript
// 在某个组件内部
import React from ‘react’;
import { Navigate } from ‘react-router-dom’;

function ProtectedComponent({ isAuthenticated }) {
if (!isAuthenticated) {
// 如果用户未认证，渲染 Navigate 组件进行重定向
return ;
}

// 否则，渲染受保护的内容
return (

);
}

export default ProtectedComponent;
“`

然后在 <Routes> 中使用这个组件：

“`javascript
// … 在 App.js 或其他地方
// 假设你有某种方式获取用户认证状态
const [isAuthenticated, setIsAuthenticated] = React.useState(false); // 示例状态

// … 在 Routes 内部
} />
“`

更多有用的 Hooks

React Router v6 提供了一些其他实用的 Hooks：

• useLocation: 返回当前的 location 对象，包含 pathname (当前 URL 路径), search (URL 中的查询字符串), hash (URL 中的哈希值) 等信息。这对于获取当前 URL 的详细信息或在 URL 变化时触发副作用很有用（例如数据跟踪）。
• useSearchParams: 用于方便地读取和修改 URL 中的查询字符串参数 (query parameters)。它返回一个包含查询参数的对象和一个用于更新它们的函数。

示例 useLocation:

“`javascript
// 在任何函数组件中
import { useLocation } from ‘react-router-dom’;

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

console.log(location.pathname); // 例如: “/about”
console.log(location.search); // 例如: “?id=123&name=test”
console.log(location.hash); // 例如: “#section”

return (

);
}
“`

示例 useSearchParams:

“`javascript
// 在任何函数组件中
import { useSearchParams } from ‘react-router-dom’;

function SearchResultsPage() {
// 返回 [searchParams, setSearchParams]
// searchParams 是一个 URLSearchParams 实例
const [searchParams, setSearchParams] = useSearchParams();

// 获取特定参数的值
const query = searchParams.get(‘query’);
const page = searchParams.get(‘page’) || ‘1’; // 提供默认值

// … 根据 query 和 page 加载数据

// 更新参数
const handlePageChange = (newPage) => {
// setSearchParams 可以接受一个对象或函数
setSearchParams({ query, page: newPage }); // URL 将更新为 ?query=…&page=…
};

return (

);
}
“`

其他 Router 类型 (简要了解)

除了 <BrowserRouter>，react-router-dom 还提供了其他类型的路由器，但在大多数 Web 应用中 <BrowserRouter> 是首选：

• <HashRouter>: 使用 URL 的哈希部分 (#) 来同步 UI 和 URL（例如 myapp.com/#/about）。不依赖 History API，兼容性更好，但在 SEO 和外观上不如 BrowserRouter。
• <MemoryRouter>: 将 URL 历史保存在内存中，不会读取或写入浏览器的地址栏。主要用于测试或非浏览器环境 (如 React Native)。

在入门阶段，专注于掌握 <BrowserRouter> 即可。

总结与下一步

恭喜你！现在你已经掌握了 React Router v6 的核心概念和基本用法：

• 理解了客户端路由的需求和 React Router 的作用。
• 学会了如何安装和设置 React Router。
• 掌握了 <BrowserRouter>, <Routes>, <Route>, <Link> 这四大核心组件的使用。
• 理解了如何定义基本路由和创建导航链接。
• 学会了如何利用 <Outlet> 和嵌套 <Route> 构建具有共享布局的复杂页面结构。
• 知道了如何使用 useParams 获取动态 URL 参数。
• 学会了使用 useNavigate 进行程序化导航。
• 了解了如何通过 path="*" 实现 404 页面。
• 掌握了使用 <Navigate> 进行重定向。
• 简要了解了 useLocation 和 useSearchParams 等其他实用 Hooks。

这只是 React Router v6 功能的冰山一角。在实践中，你可能会遇到更复杂的场景，例如：

• 代码分割和懒加载 (Lazy Loading): 如何只在访问某个路由时才加载对应的组件代码，以优化应用性能？React 的 React.lazy() 和 Suspense 可以与 React Router 结合使用。
• 数据加载 (Data Loading): 在渲染某个路由组件之前，如何预先加载它所需的数据？v6.4+ 引入了数据加载 API。
• 认证和授权: 如何保护某些路由，只允许特定用户访问？通常通过自定义路由包装组件或使用 Loader/Action 实现。
• 滚动恢复 (Scroll Restoration): 如何在页面切换时记住用户的滚动位置？

要深入学习这些高级主题，强烈建议查阅 React Router 官方文档。官方文档是最新、最权威的学习资源，包含详细的 API 参考、指南和示例。

现在，就开始在你自己的 React 项目中实践 React Router 吧！尝试将一个已有的多页应用重构成一个 SPA，或者从零开始构建一个具有复杂导航结构的单页应用。通过动手实践，你将更快地掌握 React Router 的强大功能。

祝你学习愉快！