How to specify a parameter of a component in react-router?

Question

I am using React-router recently and found it was not that intuitive. Here is my case. I defined a stateless React component "MainLayout" which has two parameters to include "headerBar" component and "children" component.

mainlayout.js:

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

My routes are like this:

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

In such a case, how to specify "headerBar" in Route of "MainLayout"?

Thanks

Derek

Do you use any kind of state container? (Redux, flux ...) – Shota Oct 11 '16 at 07:10 — Shota, Oct 11 '16 at 07:10
@shota No, I did not use any container. – derek Oct 11 '16 at 16:11 — derek, Oct 11 '16 at 16:11

score 0 · Accepted Answer · edited May 23 '17 at 12:06

0

With react router, you can declare multiple components in sub routes. This features is called Named Components.

This topic has been treated here too: Using React-Router with a layout page or multiple components per page

You should write somthing like:

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

and

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

Regards

edited May 23 '17 at 12:06

Community

1
1

answered Oct 11 '16 at 07:16

Damien Leroux

11,177
7
43
57

I tried and it cannot work and got "warning.js:36Warning: Failed prop type: Invalid prop `component` supplied to `Route`." – derek Oct 11 '16 at 16:11
Which version of react router are you using? – Damien Leroux Oct 12 '16 at 08:40
it is 2.8.1 Thanks. – derek Oct 13 '16 at 04:08
ok I think no a 's' is required in `component` from ``. I update my post – Damien Leroux Oct 13 '16 at 07:03

How to specify a parameter of a component in react-router?

1 Answers1