когда я использую history.push изменения URL, но не отображает компонент

Question

Я видел подобные проблемы, но ни одна из них не решила мою проблему.

У меня есть тег p, который onClick должен отображать на странице. Но когда я нажимаю на него и использую this.props.history.push (/ posts / $ {id}), он изменяет URL-адрес, но не отображает нужный мне компонент.

Я пытался использовать

onClick={(e, id) => this.postPage(e, post.id)}

, чтобы вызвать функцию, которая запустит компонент, который я хочу показать. Я также пытался использовать

<Link to-=''>

insted из

<p onClick>

но это тоже не работает.

Это то, что я сделал до сих пор, это функция, которая срабатывает, когда я щелкаю тег p:

 postPage = (e, id) => {
    const { history } = this.props;
    history.push(`/post/${id.toString()}`);
  }

а также, я использовал withRouter, чтобы иметь доступ к реквизиту истории.

 export default withRouter(connect(null, mapDispatchToProps)(Post));

И вот маршруты, которые я обозначил:

  render() {
     return (
       <div className="Routes">
        <Switch>
            <Route exact path='/' component={Home}></Route>
            <Route path='/post/:id' render={(history) => (
               <PostPage {...history}></PostPage>
            )}></Route>
          </Switch>
       </div>
    );
  }
}

И, конечно, когда я вызываю этот компонент, я также передаю с помощью BrowserRouter

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <Routes />
    </BrowserRouter>
  </Provider>
, document.getElementById('root'));

Я просто хотел отобразить компонент, но изменился только URL, и ничего не произошло.

Answer 1

Для тех, у кого возникла та же проблема, решение состояло в том, чтобы изменить расположение тега BrowserRouter с index.js внутри компонента, который использует Route. Я делал что-то вроде:

ReactDOM.render(<Provider>
<BrowserRouter>
<App>
</BrowserRouter>
</Provider>, document.getElementById('root'));

и теперь внутри компонента Routes.js

render() {
<BrowserRouter>
<Route ...>
<Route ...>
</BrowserRouter>

}

Answer 2

Хорошим подходом было бы реализовать поочередно реакцию-избыточный и реагирующий-маршрутизатор-дом, чтобы исключить конфликты. Двойной HOC здесь:

export default withRouter(connect(null, mapDispatchToProps)(Post));

стоит разбить на:

export default withRouter(Post);

Чтобы убедиться, что response-router-dom работает должным образом, затем внедрите response-redux, как только будет создана маршрутизация.