DrivingInsanee DrivingInsanee - 2 months ago 16
React JSX Question

React-router import routes

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

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.