React router with blog like functionality

Question

I am implementing a blog in my current website.

I have a this as my router

<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>

So everything works by putting "exact" on the "/blog" and "/case-studies" I can then go to the single page. The problem is on my blog I have a "RECENT POSTS" sections but when I am on this page "http://mysite.co.uk/blog/the-city-and-its-architecture" for example I can't go to another blog post like this one "http://mysite.co.uk//blog/photographer-and-designers". I can see the url changing but I can't navigate to another "BlogSingle component because I am already on it. Any suggestion?

Many thanks!

I am getting 404 when visitting that URLs – JoshuaCS Jan 18 '19 at 15:40 — JoshuaCS, Jan 18 '19 at 15:40
@GonFreecss Can you post the code of component BlogSingle? – JoshuaCS Jan 18 '19 at 19:19 — JoshuaCS, Jan 18 '19 at 19:19

score 0 · Answer 1 · answered Jan 18 '19 at 15:41

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

For this route, because only one of the params is changing with the route remaining the same you're component will stay mounted. If in BlogSingle you have logic to determine what is showing with componentDidMount you need to put that logic in componentDidUpdate and properly update the component when your params change on the match prop that the route passes.

React router with blog like functionality

1 Answers1