如何在 react-router 中指定组件的参数？

Question

我最近在使用 React-router，发现它不是那么直观。 这是我的情况。我定义了一个无状态的 React 组件“MainLayout”，它有两个参数，包括“headerBar”组件和“children”组件。

mainlayout.js：

const MainLayout = ({children,headerBar})=>{
  return (
    <div className="app">
      {headerBar}
      <main>
      {children}
      </main>
    </div>
  );
}
export default MainLayout;

我的路线是这样的：

routes.js：

export default (
  <Router history={browserHistory}>
    <Route component={MainLayout}> -----> how to specify "headerBar"
      <Route path="/" component={Home} />

      <Route path="widgets">
        <Route component={SearchLayout}>
          <IndexRoute component={WidgetList} />
        </Route>
      </Route>

    </Route>
  </Router>
);

在这种情况下，如何在“MainLayout”的Route中指定“headerBar”？

谢谢

德里克

Answer 1

使用 react router，你可以在子路由中声明多个组件。此功能称为Named Components。

这里也处理过这个话题：Using React-Router with a layout page or multiple components per page

你应该这样写：

<Route path="/" components={{body: Home, header: HeaderBar}} />

和

const MainLayout = ({body,header})=>{
  return (
    <div className="app">
      {header}
      <main>
      {body}
      </main>
    </div>
  );
}

问候