如何在react Router Route中使用以下格式的path

Question

我需要在React Router

中使用以下路径http://localhost: 3000/testgroup/测试/回调?代码= 2 d54b51d

我使用下面的代码来声明路径，但它不工作。知道怎么用这个吗?它适用于callback/:代码，但我的回调url来自源代码的上述格式。另外，我如何从react router中的url中提取代码。请注意，我使用的是旧版本，因为当前应用程序在旧版本中。

<TestRoute

// authenticated={true}
path={`${userRoute}/test/callback/?code=:code`}
component={CallBackHandler}
history={history}
/>

Answer 1

react-router-dom只关注URL的路径部分，queryString不用于路径匹配。

1. 从路由路径中删除queryString

   <TestRoute
   // authenticated
   path={`${userRoute}/test/callback/`}
   component={CallBackHandler}
   history={history}
   />
   

2. 在组件挂载后从location对象中读取queryString参数。创建一个自定义钩子来访问location.search并返回一个记忆的URLSearchParams对象是很有用的。

   const { useLocation } from 'react-router-dom';
   const useSearchParams = () => {
   const { search } = useLocation();
   return React.useMemo(() => new URLSearchParams(search), [search]);
   };
   const CallBackHandler = props => {
   const searchParams = useSearchParams();
   const code = searchParams.get("code");
   ...
   };