history.pu sh () не обновляет URL браузера

Question

<div key={id} onClick={() => clicked(id)}>{name}</div>

В этой вызываемой функции вызывается.

const clicked = (id) => {
    history.push(`/user_dashboard/projects/${id}/designs`);
}

это соответствует маршрутам

<PrivateRoute path={match.url + '/:id/designs'} exact component={Designs} />

У меня есть файл маршрута с этим маршрутом, который открывает панель со всеми пользовательские проекты

<PrivateRoute path='/user_dashboard/projects' exact component={Dashboard} />

В Dashboard он показывает панель инструментов со всеми проектами, а если пользователь щелкает по любому из проектов, он показывает связанные проекты, соответствующие этому проекту.

<Toolbar />
<PrivateRoute path={match.url} exact component={Projects} />
<PrivateRoute path={match.url + '/:id/designs'} exact component={Designs} />

I нужно держать панель инструментов фиксированной в обоих маршрутах. Что я могу сделать? Дайте мне знать, если найдете ошибку.

Answer 1

Вы можете использовать Link из react-router-dom вместо программного обновления URL.

<Link to={`/user_dashboard/projects/${id}/designs`} key={id}>{name}</Link>

это будет обрабатывать URL для вас, под капотом это тег привязки.

Вы можете узнать больше об этом здесь

Answer 2

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

path={`${match.url}/:id/designs`}

Я думаю, вам нужно предоставить нам более подробную информацию, чтобы помочь вам в этом вопросе.