CODEWITHSUNDEEP
javascriptreactjsrouter
ziggy
ziggy

Reputation: 55

How setup route outside main app in react router 3?

my routes config is following(react router 3):

export default {
  component: App,
  path: '/',
  indexRoute: { component: Login },
  childRoutes: [
    {
      path: 'dashboard',
      getComponent(location, cb) {
        System.import('./components/dashboard/Dashboard')
          .then(module => cb(null, checkAuth(module.default)));
      }
    },
    {
     //... another route
    },
    //..
  ]
}

Every child route is rendered within "App" component. What I want to do, is to create another component which will be "external" one. It means that my new component, let's say "OutsideComponent", should be rendered alone (NOT inside App component). Can somebody help me with such configuration?

Upvotes: 0

Views: 289

Answers (1)

Akhil P
Akhil P

Reputation: 1620

React router v3 configuration is an object (Not an array). So you should have a root Component, for which any other route is a child route. May be below configuration will work for you.

Try to keep your App as simple as possible. And use childRoutes to achieve your config

...
  path: '/',
  component: Root, // Just a component which actually renders children and nothing else
  childRoutes: [{
    path: '/',
    component: App,
    childRoutes: {} //Your App components children goes here.
  }, {
    path: '/YOUR_NEW_PATH', // not a part of your App
    component: YOUR_COMPONENT, // not a child of your APP
    childRoutes: {} // If you have some childRoutes
  }]
...

your Root component may look like below component

Root = (props) => <div>{props.children}</div>

Upvotes: 0

Related Questions