history.pu sh и Link изменяют URL и не воспроизводят компонент, если у меня много маршрутов для одного компонента

Question

// the routes here
<Switch>
     <Route exact path='/:page' component={Dashboard} />

      <Route exact path='/:subCateg/:categ' component={Dashboard} />
</Switch>

Я хочу go от первого маршрута ко второму, если я использовал (history.pu sh) или (Ссылка) только изменение URL-адреса, а не перезагрузку.

Кроме того, та же проблема, если я хочу go от второго маршрута к себе, но с новыми параметрами.

//here I'm in Dashbord and the History also pushing to Dashboard
onClick={
        ()=>{
            history.push({pathname:`/${categ}/${subCateg}`, state: {id: subCateg.id}})
                                    // window.location.reload(false);
            }
        }

, как вы можете видеть, я userd "window.location.reload (false);" и это решило проблему с загрузкой, но что если я захочу Goback с помощью кнопки Goback в браузере, та же проблема: изменить URL и не пересылать код. также я думаю, используя "window.location.reload (false);" это не очень хорошая практика.

`` package. json: "response-router-dom": "^ 5.1.2",

Answer 1

Предостережение: я опасно новичок в React, так же как и во всем этом, но сам в последний день тянул свои волосы на этом. Так что есть ряд причин, по которым этот совет может быть очень плохим. Но это была моя ситуация и то, как я заставил ее работать.

function newSongRedirect() {
    history.push("/SongDetail/0");
    history.go(0);
}

и подключил ее к моей кнопке:

<button onClick={() => newSongRedirect() } >New Song</button>

Похоже, что history.pu sh добавляет ценность для истории, но не заставляет ее действовать. Как и теперь первый элемент, history.go(0) затем заставляет его воздействовать на него.

Я видел несколько сообщений, ссылающихся на то, что history.pu sh нельзя использовать, если вы вложены в <BrowserRouter>, но в моем случае попытка заменить это в моем индексе. js просто привела к другим проблемам.

Кроме того, я нашел этот пост из того, что выглядит частью команда работает над реагирующим роутером. Кажется, что ловушка useHistory будет заменена, когда они получат шанс.

Heads up: ловушка useHistory - это быстрый пробел для будущего хука, над которым мы работаем: useNavigate. useNavigate предоставит API, более тесно связанный с ним, и исправит несколько давних проблем, связанных с использованием API истории непосредственно в маршрутизаторе (он, вероятно, будет очень похож на API навигации @ reach / router). На данный момент мы предоставляем useHistory, чтобы сделать миграцию существующего кода, использующего API истории, максимально безболезненным.

Answer 2

Поскольку вы используете response-router-dom, вы не должны использовать history.pu sh (). Вместо этого попробуйте использовать Redirect из response-router-dom.

Просто используйте состояние с именем redirect и установите для него новый требуемый маршрут go с вашей функцией:

onClick={() => this.setState({ redirect: 'newpath' }};

Затем просто поместите возврат в ваш рендер так:

if (this.state.redirect) {
    return <Redirect to={this.state.redirect} />;
}
return (
    ...rest of your render
);