Javascript 将动态url传递给反应路由器

我使用react路由器dom版本^5.1.2并尝试传递动态属性。我的根组件如下所示：

export const RegisterRoutes: React.FunctionComponent<RouteComponentProps> = ({
  match,
}: RouteComponentProps) => {
  const root = match.url;

  return (
    <Switch>
      <Route exact path={`${root}/success`} component={RegisterSuccess} />
      <Route exact path={`${root}/success/email`} component={RegisterEmail} />
      <Route exact path={`${root}/confirmation/email/:code`} component={RegisterEmailConfirmation} />
      <Redirect to={root} />
    </Switch>
  );
};

导出常量注册表项：React.FunctionComponent=({
匹配，
}：RouteComponentProps）=>{
const root=match.url；
返回(
);
};

下面是一个子RegisterEmailConfirmation组件：

export const RegisterEmailConfirmation: React.FunctionComponent<RouteComponentProps> = ({ match }) => {

  console.log(match.params.code) // expected 'code' property from the url 

  return (
     <SomeContent />
    />
  );

export const RegisterEmailConfirmation:React.FunctionComponent=（{match}）=>{
console.log（match.params.code）//应该是url中的“code”属性
返回(
/>
);

---

我有一个来自BE的url，带有动态'code'参数，它看起来像这样：注册/确认/电子邮件？代码=fjds@dfF.如何呈现RegisterEmailConfirmation组件并读取其中的'code'属性？我的代码有什么问题？

当您使用function组件时，可以在组件中使用

useParams

钩子。请参阅文件：

useparms

返回URL参数的键/值对对象。使用它访问当前

的

匹配.params

试试看：

export const RegisterEmailConfirmation: React.FunctionComponent<RouteComponentProps> = () => {
  let { code } = useParams();

  console.log(code);

  return <>
     { /* your implementation */ }
  </>
}

---

我希望这能有所帮助！

似乎无法识别路径“localhost:3000/注册/确认/电子邮件”代码=fjds@dfF”“什么也没有renders@s_kamianiok如果将URL用作注册/确认/电子邮件，会发生什么情况/fjds@dfF？抱歉，看起来一切正常。我的错误-我使用了电子邮件？代码=fjds@dfF'而不是电子邮件/我的动态-code@s_kamianiok真棒，很乐意帮忙！

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