基于ReactRouter路径的条件加载组件

Question

我使用了React-Router，编码了这个

<Router>
  <div className="app">
    <div className="wrapper">
      <AppHeaderMain />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/list/" component={List} />
        <Route path="/about/" component={About} />
        <Route component={NotFound} />
      </Switch>
      <div className="menu">
        <ul>
          <li><NavLink exact to="/">List</NavLink></li>
          <li><NavLink to="/about/">About</NavLink></li>
        </ul>
      </div>
    </div>
  </div>
</Router>

我有一个问题，是否可以根据路径路径加载另一个组件，例如：

path="/" - load <AppHeaderMain />
path="/list/" - load <AppHeaderSubpage />

我知道我可以将AppHeader组件插入到每个单独的组件中，但我不想重复一些额外的代码来完成它。我的意思是条件包括（加载）组件。这是一个好习惯吗？也许我必须完全按照我的写作方式：包含在每个单独的组件中？

Answer 1

我认为这是一个组成问题。为什么不创建工厂功能。例如：

function routeHandlerWithAppHeader(Component) {
  return (props) => (
    <div>
      <AppHeaderMain />
      <Component {...props}/>
    </div>;
  );
}

然后使用：

<Route exact path="/" component={routeHandlerWithAppHeader(Home)} />