Реагируйте на маршрутизацию с помощью крючков для прохождения Dynami c Prop в Route

Question

Я пытаюсь передать реквизит по умолчанию в Маршрут с React, который я хочу динамически изменить, когда позже вызываю Маршрут, чтобы получить доступ к n-му элементу списка вместо 0-го.

The Route объявляется в приложении. js примерно так:

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

Затем, когда я запускаю этот маршрут с помощью useHistory (), я хочу передать другое число - скажем,

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

This Однако не работает - что я делаю не так?

Answer 1

Компонент маршрута, который должен быть динамическим c, может быть заключен в

---

 export default withRouter(MyComponent);

---

Теперь в компоненте {props.locaction} содержится динамическое c состояние obj, что может быть изменен из навигации вызывающего абонента

---

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

---

Answer 2

Вам лучше использовать useRouteMatch в этом случае, я думаю:

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

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