Question

我正在当前网站上建立博客。

我有这个作为我的路由器

<Router history={history}>
  <Switch>
    <Route exact path="/" component={Homepage} />
    <Route exact path="/case-studies" component={CaseStudies} />
    <Route path="/case-studies/:id" component={CaseStudiesSingle} />
    <Route path="/about" component={About} />
    <Route exact path="/blog" component={Blog} />
    <Route path="/blog/:id" component={BlogSingle} />
    <Route path="/contact-us" component={ContactUs} />
    <Route render={ () => <h1>Page not found</h1> } />
  </Switch>
</Router>

因此，只要将“精确”放在“ / blog”和“ / case-studies”上，一切便可以进行，然后我可以转到单个页面。问题出在我的博客上，我有一个“近期帖子”部分，但是例如，当我在此页面上“ http://mysite.co.uk/blog/the-city-and-its-architecture”时，我无法转到另一篇博客文章“ http://mysite.co.uk//blog/photographer-and-designers”。我可以看到url发生了变化，但由于已经在其中，所以无法导航到另一个“ BlogSingle组件”。有什么建议吗？

非常感谢！

Answer 1

<Route path="/blog/:id" component={BlogSingle} />

对于此路由，由于只有一个参数在更改，而路由保持不变，因此您的组件将保持安装状态。如果在BlogSingle中具有确定componentDidMount显示内容的逻辑，则需要将该逻辑放入componentDidUpdate中，并在match道具上更改参数时正确更新组件路线通过。

具有类似博客功能的React Router

1 个答案: