在前端开发中，我们经常需要获取当前路由信息。对于使用 React Router 的项目而言，可以通过 useLocation 钩子函数来获取当前路由信息。
什么是 React Router？
React Router 是一个基于 React 的声明式的路由库，它能帮助我们构建单页应用（SPA）并管理其路由。
在 React Router 中，我们可以定义多个路由，并根据页面路径匹配相应的路由组件进行渲染。同时，React Router 还提供了一些钩子函数，方便我们获取路由信息或进行导航操作。
使用 useLocation 获取当前路由信息
useLocation 是 React 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