将多个路由指向同一个组件

Question

这是我的路线结构

performLogin

正如您所看到的，我将两条路线指向我的Home组件。在我的Home组件中，我在Home组件的render方法中有三个子组件。

让我们说，<Router> <Switch> <Route exact path='/' component={Home}/> <Route path='/view/:title' component={Home}/> </Switch> </Router>

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

我已使用<Header />, <Sidebar /> and <Content />.阻止对<Header /> and <Sidebar />进行不必要的更新。但是当组件的路由调用时，我无法想出一种方法来调用shouldComponentUpdate组件的render（）方法。

知道如何实现这个目标吗？

这是我的视图布局：

Answer 1

您应该能够为Home组件添加唯一引用，以便为不同的路径重新呈现：

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

但更好的是，您应该将路由放在主页组件中：

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