Pointing multiple routes to same component

Question

Here is my route structure

<Router>
  <Switch>
     <Route exact path='/' component={Home}/>
     <Route path='/view/:title' component={Home}/>
  </Switch>
</Router>

As you can see I am pointing both of my routes to my Home component. In my Home component, I have three child components inside Home component's render method.

Lets say, <Header />, <Sidebar /> and <Content />.

What I want to achieve is that I want to call my component's render() method again and update the area only.

I am already preventing unwanted update of <Header /> and <Sidebar /> using shouldComponentUpdate . But I am not able to figure a way out to call the render() method of <Home /> component when the route to the component has called.

Any idea how to achieve this?

Here is my view layout:

Answer 1

You should be able to add a unique ref to the Home component in order to get a re-render for different routes:

<Router>
  <Switch>
     <Route exact path='/'>
        <Home ref="root" />
     </Route>
     <Route path='/view/:title'>
        <Home ref="view" />
     <Route>
  </Switch>
</Router>

But better yet, you should put the routing inside your Home Component:

const App = () =>
  <div>
    <Header />
    <SideBar />
    <Router>
      <Switch>
         <Route exact path='/' component={MainPage} />
         <Route path='/view/:title' component={ViewPage} />
      </Switch>
    </Router>
  </div>