How to define child routes as react components in react-router?

Question

I have main.js:

import { render } from 'react-dom';
import { browserHistory, Router, Route, IndexRoute } from 'react-router';

import Home from './containers/Home';
import ApplicationsRoutes from './applications/routes';

render((
  <Router history={browserHistory}>
    <Route path="/" component="div">
      <IndexRoute component={Home} />      
      <ApplicationsRoutes />
    </Route>
  </Router>
), document.getElementById('app'));

And /application/routes.js :

import { browserHistory, Router, Route, IndexRoute } from 'react-router'

import ApplicationsHome from './containers/ApplicationsHome';

export default () => (
  <Route path="applications" component={ApplicationsHome} />
);

I was expecting that route from /application/routes.js will be added to the main router and so ApplicationsHome will be rendered for path /applications

Unfortunately, this is not a case. I am getting error:

Location "/applications" did not match any routes

For me it looks like such a way to compose Router does not work, but I cannot understand what is right way to do this.

Have you looked at following React Router Examples ? Covers lot of scenarios to understand its working. — WitVault
– WitVault, Commented Jan 26, 2016 at 16:21
@WitVault yep, they have example huge-apps which is about the same functionality, however it does not use react composition. So it will work as workaround. — Mike Chaliy
– Mike Chaliy, Commented Jan 26, 2016 at 16:25

taion · Accepted Answer · 2016-01-26 18:05:51Z

3

In general, when you do this, you should consider using the PlainRoute syntax instead of the JSX syntax, then use getChildRoutes on the parent routes to resolve the child routes, per the huge-apps example: https://github.com/rackt/react-router/tree/master/examples/huge-apps

This will then let you easily configure code-splitting and dynamic routes down the road.

answered Jan 26, 2016 at 18:05

taion

2,8371 gold badge17 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

taion · Accepted Answer · 2016-01-26 18:11:48Z

2

For singular routes you can export your route as a JSX element:

export default <Route path="applications" component={ApplicationsHome} />;

And include it like this:

{SomeRoute}

For multiple routes you can't export them as you have in a function, you'll get a JSX error saying you can't have adjacent components without a wrapping element. In that case you would have to do:

export default (
  <Route>
    <Route path="/about" component={About} />
    <Route path="/services" component={Services} />
  </Route>
);

And use it:

{ApplicationsRoutes}

edited Jan 26, 2016 at 18:11

taion

2,8371 gold badge17 silver badges22 bronze badges

answered Jan 26, 2016 at 16:35

nanobar

66.8k26 gold badges156 silver badges178 bronze badges

1 Comment

nanobar Over a year ago

Thanks for the edit @taion, didn't realise you could do it that way, much better. Also left in ReactRouter for some jsfiddle testing

Collectives™ on Stack Overflow

How to define child routes as react components in react-router?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related