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

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() 方法并仅更新区域。

我已经阻止了 <Header /> and <Sidebar /> 的不需要的更新使用shouldComponentUpdate 。但我无法找到调用 <Home /> 的 render() 方法的方法当组件的路由被调用时的组件。

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

这是我的 View 布局:

Answer 1

您应该能够向 Home 组件添加唯一的引用，以便为不同的路线重新渲染:

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