# React Router 路由导航hooks使用总结

1. 焦点组件

1.1 BrowserRouter

BrowserRouter 是 React Router 应用的底子容器，使用 HTML5 的 history API 实现路由功能。

1. import { BrowserRouter } from 'react-router-dom';
3. function App() {
4.   return (
5.     <BrowserRouter>
6.       <div>
7.         {/* 你的应用组件 */}
8.       </div>
9.     </BrowserRouter>
10.   );
11. }

复制代码

1.2 HashRouter

HashRouter 使用 URL 的 hash 部门（#）来保持 UI 与 URL 同步，实用于不支持 HTML5 history API 的旧版浏览器。

1. import { HashRouter } from 'react-router-dom';
3. function App() {
4.   return (
5.     <HashRouter>
6.       <div>
7.         {/* 你的应用组件 */}
8.       </div>
9.     </HashRouter>
10.   );
11. }

复制代码

1.3 Routes 和 Route

Routes 和 Route 组件用于定义应用的路由结构。

1. import { Routes, Route } from 'react-router-dom';
3. function App() {
4.   return (
5.     <Routes>
6.       <Route path="/" element={<Home />} />
7.       <Route path="/about" element={<About />} />
8.       <Route path="/users/:id" element={<UserProfile />} />
9.       <Route path="*" element={<NotFound />} />
10.     </Routes>
11.   );
12. }

复制代码

1.4 Link

Link 组件用于创建导航链接，它渲染为 HTML 的 <a> 标签，但不会触发页面革新。

1. import { Link } from 'react-router-dom';
3. function Navigation() {
4.   return (
5.     <nav>
6.       <Link to="/">首页</Link>
7.       <Link to="/about">关于</Link>
8.       <Link to="/users/123" state={{ from: 'navigation' }}>用户详情</Link>
9.       <Link to="/search?q=react">搜索</Link>
10.     </nav>
11.   );
12. }

复制代码

1.5 NavLink

NavLink 是 Link 的特别版本，可以根据当前路由状态添加样式。

1. import { NavLink } from 'react-router-dom';
3. function Navigation() {
4.   return (
5.     <nav>
6.       <NavLink
7.         to="/"
8.         className={({ isActive }) => isActive ? 'active' : ''}
9.       >
10.         首页
11.       </NavLink>
12.       <NavLink
13.         to="/about"
14.         style={({ isActive }) => ({
15.           color: isActive ? '#007bff' : '#000'
16.         })}
17.       >
18.         关于
19.       </NavLink>
20.     </nav>
21.   );
22. }

复制代码

1.6 Navigate

Navigate 组件用于实行编程式导航，通常用于重定向场景。

1. import { Navigate } from 'react-router-dom';
3. function PrivateRoute({ children }) {
4.   const isAuthenticated = checkAuth();
5.   
6.   if (!isAuthenticated) {
7.     return <Navigate to="/login" replace state={{ from: location.pathname }} />;
8.   }
9.   
10.   return children;
11. }

复制代码

1.7 Outlet

Outlet 组件用在父路由中，渲染当前匹配的子路由。

1. import { Outlet } from 'react-router-dom';
3. function Layout() {
4.   return (
5.     <div>
6.       <header>
7.         <nav>{/* 导航内容 */}</nav>
8.       </header>
9.       
10.       <main>
11.         <Outlet /> {/* 子路由将在这里渲染 */}
12.       </main>
13.       
14.       <footer>{/* 页脚内容 */}</footer>
15.     </div>
16.   );
17. }

复制代码

2. 路由 Hooks

2.1 useRoutes

useRoutes hook 用于配置式路由，可以用对象的方式定义路由结构。

1. import { useRoutes } from 'react-router-dom';
3. function App() {
4.   const routes = useRoutes([
5.     {
6.       path: '/',
7.       element: <Layout />,
8.       children: [
9.         { path: '', element: <Home /> },
10.         { path: 'about', element: <About /> },
11.         { path: 'users/:id', element: <UserProfile /> }
12.       ]
13.     }
14.   ]);
15.   
16.   return routes;
17. }

复制代码

2.2 useNavigate

useNavigate hook 提供编程式导航本事。

1. import { useNavigate } from 'react-router-dom';
3. function NavigationButtons() {
4.   const navigate = useNavigate();
5.   
6.   return (
7.     <div>
8.       <button onClick={() => navigate('/home')}>首页</button>
9.       <button onClick={() => navigate(-1)}>返回</button>
10.       <button onClick={() => navigate('/user/123', {
11.         state: { from: 'button' }
12.       })}>用户详情</button>
13.     </div>
14.   );
15. }

复制代码

2.3 useParams

useParams hook 用于获取 URL 参数。

1. import { useParams } from 'react-router-dom';
3. function UserProfile() {
4.   const { id } = useParams();
5.   
6.   return (
7.     <div>
8.       <h2>用户 ID: {id}</h2>
9.       {/* 使用 id 获取用户数据 */}
10.     </div>
11.   );
12. }

复制代码

2.4 useSearchParams

useSearchParams hook 用于读取和修改 URL 的查询参数。

1. import { useSearchParams } from 'react-router-dom';
3. function SearchPage() {
4.   const [searchParams, setSearchParams] = useSearchParams();
5.   const query = searchParams.get('q') || '';
6.   
7.   return (
8.     <div>
9.       <input
10.         value={query}
11.         onChange={(e) => setSearchParams({ q: e.target.value })}
12.         placeholder="搜索..."
13.       />
14.       <p>搜索关键词: {query}</p>
15.     </div>
16.   );
17. }

复制代码

2.5 useLocation

useLocation hook 返回当前路由的位置信息。

1. import { useLocation } from 'react-router-dom';
3. function LocationInfo() {
4.   const location = useLocation();
5.   
6.   return (
7.     <div>
8.       <p>当前路径: {location.pathname}</p>
9.       <p>查询参数: {location.search}</p>
10.       <p>状态数据: {JSON.stringify(location.state)}</p>
11.     </div>
12.   );
13. }

复制代码

2.6 useMatch

useMatch hook 用于匹配当前 URL 是否符合指定的路径模式。

1. import { useMatch } from 'react-router-dom';
3. function MatchExample() {
4.   const match = useMatch('/users/:id');
5.   
6.   if (match) {
7.     return <p>匹配到用户路由，ID: {match.params.id}</p>;
8.   }
9.   
10.   return <p>未匹配到用户路由</p>;
11. }

复制代码

2.7 useInRouterContext

useInRouterContext hook 用于检查组件是否在 Router 上下文中渲染。

1. import { useInRouterContext } from 'react-router-dom';
3. function RouterContextChecker() {
4.   const inRouterContext = useInRouterContext();
5.   
6.   return (
7.     <div>
8.       {inRouterContext ?
9.         '组件在 Router 内部渲染' :
10.         '组件在 Router 外部渲染'}
11.     </div>
12.   );
13. }

复制代码

2.8 useNavigationType

useNavigationType hook 返回当前导航的范例（POP、PUSH 或 REPLACE）。

1. import { useNavigationType } from 'react-router-dom';
3. function NavigationTypeInfo() {
4.   const navigationType = useNavigationType();
5.   
6.   return <div>导航类型: {navigationType}</div>;
7. }

复制代码

2.9 useOutlet

useOutlet hook 返回当前匹配的子路由元素。

1. import { useOutlet } from 'react-router-dom';
3. function Layout() {
4.   const outlet = useOutlet();
5.   
6.   return (
7.     <div>
8.       {outlet || <div>没有匹配的子路由</div>}
9.     </div>
10.   );
11. }

复制代码

2.10 useResolvedPath

useResolvedPath hook 将相对路径解析为绝对路径。

1. import { useResolvedPath } from 'react-router-dom';
3. function PathResolver() {
4.   const resolvedPath = useResolvedPath("../about");
5.   
6.   return <div>解析后的路径: {resolvedPath.pathname}</div>;
7. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。