React Router,常用API有哪些?

本文详细介绍了ReactRouter,一个用于管理React应用中页面导航和路由的库,重点讲解了react-router-dom的核心组件和API,以及与ReactNative和Redux的整合,展示了如何在Web和移动应用中实现客户端路由。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

react-router

React Router是一个用于构建单页面应用程序(SPA)的库,它是用于管理React应用中页面导航和路由的工具。SPA是一种Web应用程序类型,它在加载初始页面后,通过JavaScript来动态加载并更新页面内容,而不是在每次页面切换时都请求完整的新页面。通过React Router可以在React应用中实现客户端路由,在不刷新整个页面的情况下切换到不同的视图或页面。

React Router是由多个包组成的库,每个包都提供了不同的功能。以下是React Router主要的包:

  1. react-router-dom:这是React Router的核心包,用于构建Web应用的路由。它包括了用于在浏览器中实现客户端路由的组件,如BrowserRouter、Route、Link等。大多数Web应用都会使用这个包来管理路由。

  2. react-router-native:这个包是React Router的一个扩展,用于构建React Native应用的路由。它提供了类似于react-router-dom的API,但专门针对React Native环境进行了优化。

  3. react-router(不带后缀):这是React Router的核心包,它包括了一些通用的路由功能,可以在Web和Native应用中使用。但在实际开发中,通常会使用react-router-dom或react-router-native,具体根据应用类型来选择。

除了上述主要的包,React Router还提供了一些辅助工具和附加功能的包:

  1. react-router-config:这个包用于将路由配置信息提取到一个单独的地方,以便于静态路由渲染。这对于服务器渲染React应用非常有用。

  2. react-router-redux:这个包用于与Redux集成,以便在Redux存储中管理路由状态。

  3. @reach/router:虽然不是React Router的一部分,但它是一个与React Router兼容的替代品,提供了一些不同的API和性能特性。它专注于可访问性和无障碍性。

在大多数情况下,使用react-router-dom是构建Web应用的首选选择。

react-router-dom

react-router-dom提供了许多API,用于构建Web应用的客户端路由。以下是一些react-router-dom的主要API以及它们的简单示例用法:

  1. BrowserRouter:用于包装应用程序,启用基于浏览器的路由。
import { BrowserRouter, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </BrowserRouter>
  );
}
  1. Route:用于定义路由匹配的路径和要渲染的组件。
import { Route } from 'react-router-dom';

function App() {
  return (
    <div>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  );
}
  1. Link:用于创建导航链接。
import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </nav>
  );
}
  1. Switch:用于包装多个Route,只渲染第一个匹配的路由。
import { Switch, Route } from 'react-router-dom';

function App() {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route component={NotFound} />
    </Switch>
  );
}
  1. Redirect:用于在路由重定向时进行配置。
import { Redirect } from 'react-router-dom';

function App() {
  return (
    <div>
      <Switch>
        <Route exact path="/" render={() => <Redirect to="/home" />} />
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </div>
  );
}

React Router DOM提供的自定义Hook
react-router-dom还提供了一些自定义Hook,用于在函数组件中访问路由相关信息。例如:

  1. useHistory:

    useHistory Hook 允许你在组件中访问路由历史对象,以便进行编程式导航,例如在按钮点击或其他事件中跳转到不同的路由。

    import { useHistory } from 'react-router-dom';
    
    function MyComponent() {
      const history = useHistory();
    
      const handleButtonClick = () => {
        // 编程式导航到'/about'路由
        history.push('/about');
      };
    
      return (
        <div>
          <button onClick={handleButtonClick}>Go to About</button>
        </div>
      );
    }
    
  2. useLocation:

    useLocation Hook 允许你访问当前路由的location对象,包括路径、查询参数等信息。

    import { useLocation } from 'react-router-dom';
    
    function MyComponent() {
      const location = useLocation();
    
      return (
        <div>
          <p>Current Path: {location.pathname}</p>
          <p>Query Parameters: {location.search}</p>
        </div>
      );
    }
    
  3. useParams:

    useParams Hook 用于获取当前路由的动态路由参数。当你在路由定义中使用参数占位符时,你可以使用这个Hook来获取传递给路由的参数值。

    import { useParams } from 'react-router-dom';
    
    function UserProfile() {
      const { username } = useParams();
    
      return (
        <div>
          <h2>User Profile</h2>
          <p>Username: {username}</p>
        </div>
      );
    }
    

参数传递

在react-router-dom中,你可以使用路由参数来传递和获取参数。参数通常用于将动态数据传递给组件,例如用户ID或产品ID。

  1. 定义带参数的路由

    首先,在路由配置中定义带有参数的路由。使用:parameterName来表示参数占位符。例如:

    <Route path="/user/:userId" component={UserProfile} />
    
  2. 使用useParams Hook获取参数

    在要接收参数的组件中,使用useParams Hook来获取参数的值。例如:

    import { useParams } from 'react-router-dom';
    
    function UserProfile() {
      const { userId } = useParams();
    
      return (
        <div>
          <h2>User Profile</h2>
          <p>User ID: {userId}</p>
        </div>
      );
    }
    

    在上面的示例中,使用useParams Hook来获取路由参数中的userId。这个参数的值将根据实际的路由路径动态获取。

  3. 传递参数

    若要传递参数到带参数的路由,可以在<Link>组件或编程式导航中设置参数。例如:

    使用<Link>组件:

    import { Link } from 'react-router-dom';
    
    function UserList() {
      return (
        <ul>
          <li><Link to="/user/1">User 1</Link></li>
          <li><Link to="/user/2">User 2</Link></li>
          {/* ... */}
        </ul>
      );
    }
    

    编程式导航:

    import { useHistory } from 'react-router-dom';
    
    function navigateToUserProfile(userId) {
      const history = useHistory();
      history.push(`/user/${userId}`);
    }
    

V5 和 V6的使用区别

  1. <Switch> 全部改为 <Routes>
// v5
 import {Route, Switch} from 'react-router-dom' //引入react-router
 
<div>
    <Switch>
    </Switch>
</div>
 // v6
  import {Route, Routes } from 'react-router-dom' //引入react-router
 
 <div>
    <Routes >
    </Routes>
 </div>
  1. Route 的 render 和 component 改为 element,且可以嵌套路由
// v5
 import {Route, Switch} from 'react-router-dom' //引入react-router
<div>
    <Switch>
        <Route path="/about">
            <About />
        </Route>
    </Switch>
</div>
// v6
 import {Route, Routes } from 'react-router-dom' //引入react-router
<div>
    <Routes >
        <Route path="/about" element={<About />} />
    </Routes>
</div>
  1. to、navigate、path 不以 / 开头都是相对路径,与 cd 命令行类似
    在 v5 中,以 / 开头的 <Link to> 值是不明确的;它取决于当前的 URL 是什么。例如,如果当前的 URL 是 /users ,那么 v5 中的 将呈现为 <a href="/me"> 。然而,如果当前的 URL 有一个尾随斜杠,比如 /users/ ,同样的 将呈现为 <a href="/users/me"> 。这使得很难预测链接的行为,因此在 v5 中,从根 URL(使用 match.url )构建链接,而不是使用相对的 <Link to> 值。
    React Router v6 修复了这种不确定性。在 v6 中,无论当前的 URL 是什么, <Link to="me"> 都将始终呈现相同的 <a href>
    例如,在 <Route path="users"> 中呈现的 <Link to="me"> 将始终呈现到 /users/me 的链接,无论当前的 URL 是否有尾随斜杠。

  2. v6 用useNavigate实现编程式导航,不再使用useHistory
    naviaget(to)默认就是 history.push,naviaget(to, { replace: true })就是 history.replace,naviaget(to: number)就是 history.go。

import { useNavigate } from "react-router-dom";

function App() {
  const navigate = useNavigate();
  function handleClick() {
    navigate("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}
<think>我们正在讨论React Router的Hooks,根据用户的问题,他想了解React Router常用的Hooks及其用途。 根据引用[1][2][3][4]中提到的内容,我们可以总结出以下常用Hooks: 1. `useParams`:用于获取动态路由参数。 2. `useNavigate`:用于编程式导航。 3. `useLocation`:用于获取当前location对象,包含pathname、search、hash等。 4. `useSearchParams`:用于读取和修改URL中的查询字符串。 5. `useRouteMatch`:在v5中用于获取当前路由的匹配信息,但在v6中已被其他方式替代(如useMatch)。 6. `useMatch`:v6中用于匹配给定路径的模式,返回匹配信息。 7. `useResolvedPath`:解析给定路径,返回包含pathname、search、hash的对象。 8. `useOutlet`:返回当前嵌套路由的出口(即嵌套路由中渲染的子路由元素)。 9. `useNavigationType`:返回当前的导航类型(如POP、PUSH、REPLACE)。 10. `useHref`:用于生成一个链接的href,通常用于自定义链接组件。 但是,请注意,引用[1][2][3][4]中特别提到了几个Hooks,我们将重点介绍这些Hooks,并补充其他常用的。 根据引用[3]: - useParams:对标v5路由组件的match.params - useSearchParams:用于操作查询参数 根据引用[4]: - useParams的使用示例 另外,引用[2]提到了在v5中通过Route组件的render属性获取match,但在v6中推荐使用Hooks。 因此,我们将重点介绍以下Hooks(按照常用程度排序): 1. useParams 2. useNavigate 3. useLocation 4. useSearchParams 5. useMatch (v6) 6. useRoutes (注意:这是一个用于配置路由的钩子,但通常我们使用<Routes>组件,不过也可以使用useRoutes钩子进行集中式配置) 注意:引用[3]还提到了useMatch,但指出它需要传入全路径,所以不如useParams方便。 下面我们详细说明每个Hook的用途和示例。</think>### React Router 常用 Hooks 详解 React Router v6 提供了丰富的 Hooks API,简化了路由操作和状态管理。以下是核心 Hooks 及其使用场景: --- #### 🔑 **核心 Hooks 列表** | Hook | 用途描述 | 使用场景示例 | |----------------------|--------------------------------------------------------------------------|----------------------------------------------------------------------------| | `useParams()` | 获取动态路由参数 | 解析 URL 中的动态 ID(如 `/users/:id`)[^1][^3][^4] | | `useNavigate()` | 实现程序化导航 | 表单提交后跳转页面、按钮触发路由切换[^1] | | `useLocation()` | 获取当前路由信息 | 监听路径变化、获取查询参数(`location.search`)[^2] | | `useSearchParams()` | **读写 URL 查询参数** | 管理搜索筛选条件(如 `?sort=price&page=2`)[^3] | | `useMatch()` | 检查当前路由是否匹配指定模式 | 高亮导航菜单项、条件渲染组件[^3] | | `useRoutes()` | 通过 JS 对象配置路由(替代 `<Routes>`) | 集中式路由管理、动态生成路由表 | | `useOutlet()` | 获取嵌套路由的渲染出口 | 在父布局组件中控制子路由渲染位置[^1] | --- #### 🛠️ **详细使用示例** 1. **`useParams` - 获取动态参数** ```jsx // 路由配置: <Route path="/product/:id" element={<ProductPage />} /> import { useParams } from 'react-router-dom'; function ProductPage() { const { id } = useParams(); // 获取 URL 中的 id 值 return <div>当前产品ID: {id}</div>; } ``` **场景**:商品详情页、用户个人资料页[^4]。 2. **`useNavigate` - 程序化导航** ```jsx import { useNavigate } from 'react-router-dom'; function LoginForm() { const navigate = useNavigate(); const handleSubmit = () => { // 登录成功后跳转 navigate('/dashboard', { replace: true }); // replace 替换历史记录 }; return <button onClick={handleSubmit}>登录</button>; } ``` **场景**:表单提交跳转、权限拦截重定向[^1]。 3. **`useSearchParams` - 管理查询参数** ```jsx import { useSearchParams } from 'react-router-dom'; function SearchPage() { const [searchParams, setSearchParams] = useSearchParams(); const keyword = searchParams.get('q') || ''; const updateKeyword = (text) => { // 更新 URL 为 /search?q=text setSearchParams({ q: text }); }; return <input value={keyword} onChange={(e) => updateKeyword(e.target.value)} />; } ``` **场景**:搜索页、数据表格筛选[^3]。 4. **`useMatch` - 路由匹配检测** ```jsx import { useMatch } from 'react-router-dom'; function NavLink({ to }) { const match = useMatch(to); // 检查当前路径是否匹配 return ( <Link to={to} style={{ color: match ? 'red' : 'black' }}> 导航项 </Link> ); } ``` **场景**:动态导航菜单样式、条件渲染组件[^3]。 --- #### ⚠️ **升级注意事项** - **`withRouter` 替代方案**:v5 的 `withRouter` 高阶组件已被弃用,改用 `useParams`/`useNavigate` 等钩子[^2]。 - **路径匹配规则**:v6 的 `useMatch()` 需传入完整路径(如 `/users/:id`),而 `useParams` 更常用[^3]。 - **路由守卫实现**:结合 `useLocation` 和 `useNavigate` 实现权限控制: ```jsx const location = useLocation(); const navigate = useNavigate(); useEffect(() => { if (!isAuth) navigate('/login', { state: { from: location } }); }, []); ``` > **总结**:React Router Hooks 提供了声明式路由操作方案,显著减少组件嵌套层级。重点掌握 `useParams`(参数解析)、`useNavigate`(导航控制)、`useSearchParams`(URL 参数管理)三大核心钩子,可覆盖 90% 的路由场景[^1][^3][^4]。 --- ### 🔍 相关问题 1. React Router 的 `useNavigate` 和 `Link` 组件有何区别?如何选择? 2. 如何用 `useSearchParams` 实现分页参数与 URL 同步? 3. React Router v6 中如何实现路由切换时的滚动复位?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值