Confused on writing react-router code

Question

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

rishat · Accepted Answer · 2016-02-01 21:54:46Z

1

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

answered Feb 1, 2016 at 21:54

rishat

8,3765 gold badges51 silver badges72 bronze badges

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

2 Comments

user1595858 Over a year ago

Where does export default { come from?

rishat Over a year ago

It's ES6 module export syntax, see docs. The default keyword means that when you import from that source, whatever variable you assign the import to, will contain the default export. Non-default exports will be composed into an object, each property's key is the name of the export. You can have many export statements and only one export default.

Collectives™ on Stack Overflow

Confused on writing react-router code

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related