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()}`);
  }

而且，我使用Router来访问历史记录道具。

 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(Post);

值得细分为：

[A-Z][a-z]+

为确保react-router-dom能够正常工作，请在路由到位后实施react-redux。

Answer 2

对于遇到同样问题的用户，解决方案是将BrowserRouter标记位置从index.js更改为使用Route的组件内部。我正在做类似的事情：

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

，现在位于Routes.js组件中

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

}

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

2 个答案: