我有一个react应用程序,我想根据路径呈现一些菜单。我有以下URL:
http://localhost:3000/Test/marks
现在,从这个URL中,我只需要获取Test字符串,这样我就可以将该字符串与数组进行匹配,然后获取与该键相关联的对象。我尝试使用useLocation,但它给了我们对象,我必须再次添加一个正则表达式来获得该名称。还有别的办法吗?谢谢
useLocation
xzv2uavs1#
您可以使用useParams钩子来实现此功能
useParams
<Route path='/:id/marks' element={<Component/>}>
在您的组件中
import { useParams } from 'react-router-dom'; function Component() { // Get the id param from the URL. let { id } = useParams(); // ... }
93ze6v8z2#
您提到了useLocation钩子,因此我假设您使用的是react-router或react-router-dom。您可以使用useMatch钩子来测试路径模式,如果存在匹配,则返回一个匹配对象。match对象有一个params属性,该属性上有任何可用的路径参数。
react-router
react-router-dom
useMatch
params
declare function useMatch< ParamKey extends ParamParseKey<Path>, Path extends string >( pattern: PathPattern<Path> | Path ): PathMatch<ParamKey> | null;
interface PathMatch<ParamKey extends string = string> { params: Params<ParamKey>; pathname: string; pattern: PathPattern; }
示例:测试路径:"/Test/marks"
"/Test/marks"
import { useMatch } from 'react-router-dom'; ... const match = useMatch("/:key/marks"); console.log(match?.params?.key); // "Test" ...
如果需要访问URL路径的该部分的组件已经被呈现为正常路由的一部分,例如在路径"/:key/marks"上呈现的路由上,它也可以直接使用useParams钩子来访问key路径参数。示例:
"/:key/marks"
key
<Route path="/:key/marks" element={.....} />
在测试路径上的路由组件中:"/Test/marks"
const { key } = useParams(); // "Test"
2条答案
按热度按时间xzv2uavs1#
您可以使用
useParams
钩子来实现此功能在您的组件中
93ze6v8z2#
您提到了
useLocation
钩子,因此我假设您使用的是react-router
或react-router-dom
。您可以使用useMatch
钩子来测试路径模式,如果存在匹配,则返回一个匹配对象。match对象有一个params
属性,该属性上有任何可用的路径参数。示例:
测试路径:
"/Test/marks"
如果需要访问URL路径的该部分的组件已经被呈现为正常路由的一部分,例如在路径
"/:key/marks"
上呈现的路由上,它也可以直接使用useParams
钩子来访问key
路径参数。示例:
在测试路径上的路由组件中:
"/Test/marks"