Question

我正在尝试将默认的prop传递给带有React的Route，当我稍后调用Route来访问列表的第n个项而不是第0个时，我想动态更改它。

在App.js中声明路线，如下所示：

<Route
  exact
  path="/myurl"
  render={(props) => <MyComponent{...props} startAtStep={0} />}
/>

然后，当我使用useHistory（）触发该路由时，我想输入另一个数字-说

const handleEdit = (newIndex) => {
  setTimeout(() => {
    push('/myurl', { startAtStep: newIndex});
  }, 220);
};

但是，这不起作用-我在做什么错了？

Answer 1

在这种情况下，最好使用useRouteMatch：

const handleEdit = (newIndex, props) => {
  let match = useRouteMatch({
    exact: true,
    path: '/myurl'
  });

  return (
    <div>
      {match && <MyComponent {...props} startAtStep={newIndex} />
    </div>
  );
};

Answer 2

应该是动态的路由组件可以用

包裹

 export default withRouter(MyComponent);

现在，组件{props.locaction}包含动态状态obj，可以从导航调用方对其进行修改

 <Link
    to={{
      pathname: '/',
      state: { startAtStep : n }
    }}
  >

使用钩子对路由进行反应以将动态道具传递给路由

2 个答案: