如何获取当前路由的路由器2.0.0-rc5反应

阅读时长 3 分钟读完

在前端开发中,我们经常需要获取当前路由信息。对于使用 React Router 的项目而言,可以通过 useLocation 钩子函数来获取当前路由信息。

什么是 React Router?

React Router 是一个基于 React 的声明式的路由库,它能帮助我们构建单页应用(SPA)并管理其路由。

React Router 中,我们可以定义多个路由,并根据页面路径匹配相应的路由组件进行渲染。同时,React Router 还提供了一些钩子函数,方便我们获取路由信息或进行导航操作。

使用 useLocation 获取当前路由信息

useLocationReact Router 提供的一个自定义钩子函数,它能够返回当前页面的位置信息。我们可以从这个对象中获取到当前页面的路径、查询参数以及哈希值等信息。

下面是一个例子,在这个例子中,我们定义了两个路由:/home/about。当用户访问 /home 路径时,会显示 Home 组件;当用户访问 /about 路径时,会显示 About 组件。在 App 组件中,我们使用 useLocation 钩子函数获取当前路由信息,并在页面上展示出来。

-- -------------------- ---- -------
------ - ------------- -- ------- ------- ------ ----- ----------- - ---- -------------------

-------- ------ -
  ------ --------------
-

-------- ------- -
  ------ ---------------
-

-------- ----- -
  ----- -------- - --------------

  ------ -
    --------
      -----
        -----
          ----
            ----
              ----- ----------------------
            -----
            ----
              ----- ------------------------
            -----
          -----
        ------

        --- --

        ----------- --------- ------------------------

        --------
          ------ -------------
            ----- --
          --------
          ------ --------------
            ------ --
          --------
        ---------
      ------
    ---------
  --
-

在上面的代码中,我们首先导入了 useLocation 函数,并在 App 组件中调用这个函数获取当前路由信息。

然后,我们使用 BrowserRouter 组件来包裹整个应用程序,并定义了两个路由:/home/about。在页面中,我们通过 Link 组件来实现路由跳转。

最后,在页面中展示了当前路由的路径信息。

总结

通过 useLocation 钩子函数,我们可以方便地获取当前路由信息,并在页面中进行展示。同时,React Router 还提供了许多其他的钩子函数和组件,可以帮助我们更加灵活地管理路由。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/13407

纠错
反馈