<hr />

  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="/contact" element={<Contact />} />
  </Routes>
</div>

用户详情页

用户 ID: {id}

用户列表

• 用户 1
• 用户 2

嵌套用户详情

这是嵌套路由中的用户详情页面。

用户页面

  {/* Outlet 会渲染匹配到的子路由 */}
  <Outlet />

  {/* 可以在这里定义嵌套的 Routes，但更推荐在父 Routes 中定义 */}
  {/* 
    <Routes>
      <Route path="/" element={<UserList />} />
      <Route path=":id" element={<UserDetailNested />} />
      <Route path="new" element={<h3>创建新用户表单</h3>} />
    </Routes>
  */}
</div>

);
}

export default Users;

// src/App.js 中的路由定义 (注意 “/” 用于匹配所有子路径)
// }>
// } /> {/ /users /}
// } /> {/ /users/1, /users/2 /}
// 创建新用户表单\

} /> {/ /users/new */}
//

// 注意：在 React Router v6 中，嵌套的 通常直接定义在父 的 element prop 内部，或者像上面 组件中那样，使用 和独立的 块。
// 示例：
// }>
// } /> // index 路由匹配父路径
// } />
// 创建新用户表单\

} />
//
“`

3. 编程导航 (useNavigate)

useNavigate Hook 返回一个函数，可以用于在组件内部触发导航，无需用户点击 Link。

“`javascript
// src/components/Login.js (示例：登录后跳转)
import React from ‘react’;
import { useNavigate } from ‘react-router-dom’;

function Login({ onLogin }) {
const navigate = useNavigate();

const handleLoginClick = () => {
onLogin(); // 模拟登录成功
navigate(‘/dashboard’); // 登录后跳转到仪表盘
};

return (

);
}

export default Login;
“`

4. 重定向 (Navigate)

Navigate 组件允许你在组件渲染时立即触发重定向。

“`javascript
// src/App.js (示例：旧路径重定向到新路径)
import { Navigate } from ‘react-router-dom’;

// …

{/ … 其他路由 … /}
} /> {/ 重定向到 /about /}

// …
``replace` 属性会替换历史堆栈中的当前条目，而不是添加新条目。

5. 404 Not Found 路由

使用 path="*" 可以匹配任何未被前面路由匹配到的路径，通常用于显示 404 页面。

“`javascript
// src/components/NotFound.js
import React from ‘react’;

function NotFound() {
return (

);
}

export default NotFound;

// src/App.js 中的路由定义 (放在 Routes 的最后)
// } />
“`

6. 保护路由

保护路由 (或私有路由) 确保只有经过身份验证的用户才能访问特定页面。这通常通过创建一个包装组件来实现。

“`javascript
// src/components/Protected.js
import React from ‘react’;
import { Navigate } from ‘react-router-dom’;

function Protected({ isAuthenticated, children }) {
if (!isAuthenticated) {
// 如果未认证，重定向到登录页
return ;
}
return children; // 如果认证通过，渲染子组件
}

export default Protected;

// src/App.js 中的使用
//
// \
// \
// }
// />
“`

7. 查询参数 (useSearchParams)

查询参数是 URL 中 ? 后面跟着的键值对 (例如 /search?query=react&page=1)。useSearchParams Hook 允许你轻松地读取和修改它们。

“`javascript
// src/components/QueryParams.js
import React from ‘react’;
import { useSearchParams } from ‘react-router-dom’;

function QueryParams() {
const [searchParams, setSearchParams] = useSearchParams();

const name = searchParams.get(‘name’);
const age = searchParams.get(‘age’);

const handleUpdateParams = () => {
// 设置新的查询参数，这会更新 URL
setSearchParams({ city: ‘NewYork’, country: ‘USA’ });
};

return (

);
}

export default QueryParams;

// src/App.js 中的路由定义
// } />
“`

结论

React Router DOM 是 React 应用程序中管理路由的强大工具。通过理解 BrowserRouter、Routes、Route、Link 和 NavLink 等核心组件，以及 useNavigate、useParams 和 useSearchParams 等 Hooks，你可以构建出具有良好用户体验和复杂导航逻辑的单页应用程序。

熟练掌握这些概念和实践，将使你能够更好地组织代码、提高应用性能，并为用户提供无缝的导航体验。希望这篇完全指南能帮助你更好地利用 React Router DOM 构建出色的 React 应用。

---

注意: 上述代码示例是基于 React Router DOM v6 版本。如果你使用的是旧版本，某些 API 可能有所不同。