react hash模式获取url参数
要在React中获取URL参数,可以使用react-router-dom库中的useParams和useLocation钩子。以下是一个示例代码,演示如何获取URL参数:
jsx
import React from 'react';
import { useParams, useLocation } from 'react-router-dom';
function MyComponent() {
  const { param1, param2 } = useParams('/route/:param1/:param2');
  const location = useLocation();
  return (
    <div>
      <p>URL参数param1: {param1}</p>
      <p>URL参数param2: {param2}</p>
      <p>当前URL: {location.pathname}</p>
    </div>
  );
}
在上面的代码中,我们首先使用useParams钩子来获取URL中的参数。useParams接受一个路由路径作为参数,并返回一个包含路径中参数的对象。在本例中,我们使用/route/:param1/:param2作为路由路径,它将匹配以/route/value1/value2形式的URL。然后,我们可以在组件中使用param1和param2变量来获取URL参数。
接下来,我们使用useLocation钩子来获取当前URL。我们可以使用location.pathname来获取完整的URL路径,或者使用其他属性来获取URL中的其他部分。
注意:为了使用react-router-dom库,您需要在项目中安装它并导入相关的钩子函数。如果您还没有安装该库,可以使用以下命令进行安装:react router cache
shell
npm install react-router-dom