React-router import routes

Question

I would like to change this:

  <Router history={browserHistory}>
    <Route path='/' component={Layout}>
      <Route path='signup' component={SignupPage} />
      <Route path='assemblies/' component={AssemblyPages}>
        <Route path='categories/' component={Categories}>
      </Route>
    </Route>
  </Router>

To

import AssembliesRoute from './AssembliesRoute';

   <Router history={browserHistory}>
    <Route path='/' component={Layout}>
      <Route path='signup' component={SignupPage} />
      <AssembliesRoute />
    </Route>
  </Router>

//AssembliesRoute.js

export default class extends compondent {
render(){
  return <Route path='assemblies/' component={AssemblyPages}>
            <Route path='categories/' component={Categories}>
         </Route>
}
}

Basically, I want to take all of the routes nested inside the assemblies route, and deal with them in a specific file in the assemblies folder, and then return those routes to the Router. But when I try to do this, I get no route found. Is this possible?

Answer 1

The problem with React Router is that you cannot pass it a Component that wraps a Route.

So, if you create a Component called AssemblyRoutes that wraps all your assemblies, it won't work.

What you can do is pass a function that returns the raw Route Components like so:

//AssemblyRoutes
    export default function(){
     return <Route ... >
    }

and then call the function in your routes

import assemblyRoutes from 'AssemblyRoutes
<Router>
 <Route>
  {assemblyRoutes()}
 </Route>
</Router>

And voila, you can import routes into your main routes page.