React获取router路由路径里的相关信息

路由：'financial-budget/:id/edit'
路径：http://localhost:3000/financial-budget/4028963b7ce8b541017ce90bed9400ca/edit

（1）用 useParams() 获取参数：

import { useParams } from 'react-router-dom';

const { id } = useParams();

console.log(useParams());  ======>  useParams: {id: '4028963b7ce8b541017ce90bed9400ca'}

（2）用 useLocation() 获取当前页面url、hash：

import { useLocation } from 'react-router';

const location = useLocation();
const { pathname } = location;

console.log(useLocation());
=====>
useLocation():{
	hash: ""
	key: "9h7f5g"
	pathname: "/financial-budget/4028963b7ce8b541017ce90bed9400ca/edit"
	search: ""
	state: undefined
}

（3）用 useRouteMatch 获取当前页面url

路由：'/project-budget-query/supervise/:id/:year/detail'
路径：http://localhost:3000/project-budget-query/supervise/4028963b7fbad768017fbfce14e3017e/2023/detail

import { useRouteMatch } from 'react-router';

const { path } = useRouteMatch();

useEffect(() => {
    setEditDisplay(path.includes('/edit'));
}, [path]);

console.log(useRouteMatch());
=====>
useRouteMatch():{
	isExact: true
	params: {id: '4028963b7fbad768017fbfce14e3017e', year: '2023'}
	path: "/project-budget-query/supervise/:id/:year/detail"
	url: "/project-budget-query/supervise/4028963b7fbad768017fbfce14e3017e/2023/detail"
}

为了实现页面的跳转，需要安装react-router-dom。
执行：

npm i react-router-dom
或
yarn add react-router-dom

React Router附带了一些HOOK，可让您访问路由器的状态并从组件内部执行导航

• useHistory：useHistory 钩子返回 history 对象，可以使用 useHistory 进行导航
• useLocation：useLocation 钩子返回当前URL的 location 对象。可以把它想象成一个useState，每当URL发生变化时，它都会返回一个新的位置。
• useParams：useParams 动态参数列表的引用对象，用于获取<Route>中的 match.params (动态参数)
• useRouteMatch：useRouteMatch 尝试以与<Route>相同的方式匹配当前URL。它主要用于访问匹配数据，而无需实际渲染<Route>

React Router相关标签：

• <BrowserRouter>：Router使用HTML5 History API（(pushState, replaceState and the popstate event）来保证 UI 组件和 URL 同步
• <HashRouter>：<Router>使用 Hash 模式路由(i.e. window.location.hash)来保证 UI 组件和 URL 同步
• <Link>：提供声明式、可访问的导航
• <NavLink>：特殊的<Link>，当它匹配当前URL时，它会为当前处于激活状态链接添加样式
• <Prompt>：重新导出核心提示符
• <MemoryRouter>：特殊<Router>，将URL的历史记录保存在内存中(不读取或写入地址栏)。在测试和非浏览器环境(如React Native)中很有用
• <Redirect>：<Redirect>会导航到新位置。新位置将覆盖历史记录堆栈中的当前位置，就像服务器端重定向（HTTP 3xx）一样
• <Route>：路由组件可能是React路由器中最重要的组件，需要理解和学习使用。它最基本的职责是在路径与当前URL匹配时渲染指定的UI组件。
• <Router>：
• 所有路由器组件的通用低级接口。通常，应用程序会使用一种高级路由器来代替:
  • <BrowserRouter>
  • <HashRouter>
  • <MemoryRouter>
  • <NativeRouter>
  • <StaticRouter>
    使用低级别的<Router>常见用例是将自定义历史记录与状态管理库（例如Redux或Mobx）进行同步。请注意，不需要将状态管理库与 React Router 一起使用，仅用于深度集成。
• <StaticRouter>：永不改变位置的<Router>这在服务器端渲染场景中很有用，因为用户实际上并没有四处单击，所以位置实际上从未改变。因此，它的名字是:static。在简单的测试中，当您只需要插入一个位置并对渲染输出作出断言时，它也很有用
• <Switch>：渲染成功匹配 path 的第一个子元素<Route>或<Redirect>

React Router相关属性、方法、对象：

• generatePath：可以使用generatePath函数生成路由的url。在内部使用path-to-regexp库。
• history：它是React路由器仅有的两个主要依赖项之一(除了React本身)，它提供了在不同环境下用JavaScript管理会话历史的几种不同实现。
  history对象是可变的。因此，建议从<Route>的渲染属性中访问 location，而不是从history.location中。这可以确保React的假设在生命周期钩子中是正确的
  history 对象通常具有以下属性和方法:
  • length <number> history 堆栈中的历史记录条目数
  • action <string> 当前操作（push，replace，pop）
  • location <object> location 对象，具有以下属性：
    • pathname <string> URL路径
    • search <string> URL查询字符串
    • hash <string> URL Hash 片段
    • state <object> 特定于location的状态，例如push(path, state)在将该位置推入堆栈时所提供的状态。仅在浏览器和内存历史记录中可用。
  • push(path, [state]) <function> 将新条目推入历史记录堆栈
  • replace(path, [state]) <function> 替换历史记录堆栈上的当前条目
  • go(n) <function> 将历史堆栈中的指针移动n个条目
  • goBack() <function> 等同于 go(-1)
  • goForward() <function> 等同于 go(1)
  • block(prompt) <function> 防止导航（请参阅历史记录文档）
• location：代表应用程序现在的路径，需要前往的路径，或者之前访问过的路径。看起来像这样:

  {
     key: 'ac3df4', // not with HashHistory!
     pathname: '/somewhere',
     search: '?some=search-string',
     hash: '#howdy',
     state: {
        [userDefined]: true
     }
  }
  

• match：match对象包含了关于 <Route path> 如何匹配URL的信息。match对象包含以下属性
  • params <object> 从URL解析到的键/值对
  • isExact <boolean> 如果匹配整个URL(没有末尾字符)则为true
  • path <string> 用于匹配的path模式。用于构建嵌套的<Route>s
  • url <string> URL的匹配部分。对于构建嵌套<Link>s
• matchPath：这使您可以使用与<Route>相同的匹配代码，除了正常渲染周期之外，例如在服务器上渲染之前收集数据依赖项。
• withRouter：非路由组件可以通过withRouter高阶组件访问 History 对象的属性和进行<Route>匹配。withRouter将在渲染时向包装组件传递更新的 match、location 和 history 属性。

具体内容参考：react-router-dom 中文文档、npm官网

这篇好文章是转载于：学新通技术网