CODEWITHSUNDEEP
reactjsreact-router
user1595858
user1595858

Reputation: 3878

Confused on writing react-router code

What is the difference in writing react-router in following different ways?

1.) As seen in react-router github page

  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="about" component={About}/>
      <Route path="users" component={Users}>
        <Route path="/user/:userId" component={User}/>
      </Route>
      <Route path="*" component={NoMatch}/>
    </Route>
  </Router>

2.) webpack code for hugeapp

import TodoApp from './TodoApp';
import TodoMain from './TodoMain';

export default {
  path: '/',
  component: TodoApp,
  indexRoute: { component: TodoMain },
  childRoutes: []
};

3.) webpack for simple app

import { Route, IndexRoute } from 'react-router';

import TodoApp from './TodoApp';
import TodoMain from './TodoMain';

export default (
  <Route path="/" component={TodoApp}>
    <IndexRoute component={TodoMain} />
  </Route>
);

Upvotes: 1

Views: 73

Answers (1)

rishat
rishat

Reputation: 8376

Just take a look at the Alternate Configuration section on official docs. It explains that react-router can either accept JSX or a plain-object, each having two mandatory properties: path and component. The indexRoute property of that plain-object is "replaced" (in fact, it's not) by <IndexRoute /> component; and childRoutes is the same as children prop of a component which is filled by whatever is encapsulated into the component.

So, the

export default {
  path: '/',
  component: TodoApp,
  indexRoute: { component: TodoMain },
  childRoutes: []
};

configuration can be written in JSX way:

export default (
  <Route path="/" component={TodoApp}>
    <IndexRoute component={TodoMain} />
  </Route>
);

Upvotes: 1

Related Questions