将多条路线指向同一组件

Question

这是我的路线结构

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

如您所见，我将两条路径都指向Home组件。 在我的Home组件中，Home组件的render方法内有三个子组件。

可以说<Header />, <Sidebar /> and <Content />.

我想要实现的是，我想再次调用组件的render（）方法并仅更新区域。

我已经在防止使用shouldComponentUpdate意外更新<Header /> and <Sidebar /> 。 但是当调用组件的路由时，我无法找到一种方法来调用<Home />组件的render（）方法。

任何想法如何实现这一目标？

这是我的视图布局：

Answer 1

您应该能够向Home组件添加唯一的ref，以便针对不同的路线进行重新渲染：

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

但是更好的是，您应该将路由放入Home组件中：

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