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”的路由中指定“headerBar”？

由于

德里克

Answer 1

使用react路由器，您可以在子路由中声明多个组件。此功能称为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>
  );
}

此致

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

1 个答案: