当我使用 history.push url 更改但不呈现组件时

Question

我见过这样的问题，但它们都没有解决我的问题。

我有一个 p 标签，onClick 应该呈现一个页面。但是当我点击它并使用 this.props.history.push（/posts/${id}） 时，它会更改 url，但不呈现我想要的组件。

我试过使用

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

触发

一个函数，该函数将触发我要显示的组件。我也尝试使用

<Link to-=''>

而不是

<p onClick>

但它也不起作用。

这是我

到目前为止所做的，这是我单击p标签时触发的功能：

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

而且，我使用路由器可以访问历史记录道具。

 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

一个好的方法是一次实现一个 react-redux 和 react-router-dom，以确保没有冲突。这里的双重 HOC ：

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

值得分解为：

export default withRouter(Post);

为了确保 react-router-dom 按预期工作，请在路由到位后实现 react-redux。

Answer 2

对于那些遇到相同问题的人来说，解决方案是将 BrowserRouter 标记位置从索引.js更改为使用路由的组件内部。我正在做这样的事情：

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

现在在路由.js组件中

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