Import React-router 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> 

For

 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 use all the routes nested in the assembly route, and process them in a specific file in the assemblies folder, and then return these routes to the router. But when I try to do this, I have no route. Is it possible?

Answer 1

The problem with React Router is that you cannot pass it the component that wraps the route.

So, if you create an AssemblyRoutes component that wraps all your assemblies, it will not work.

What you can do is pass a function that returns the raw components of the route, for example:

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

and then call the function in your routes

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

And you can import routes to the routes main page.

Answer 2

The problem here is in the component={AssembliesRoute} . Basically, you say that the router reacts to the fact that the component that it should display as the base for assembly routes is a list of routes that for obvious reasons will not work. I think what you can do is make the AssembliesRoute component of React, which returns a list of routes, and then nested it in the Router hierarchy. Like this:

 // AssembliesRoutes.js class AssembliesRoutes extends React.Component { render() { return ( <Route path='assemblies/' component={AssemblyPages}> <Route path='categories/' component={AssemblyCategoriesPages}> <Route path='create' component={AssemblyCategoriesCreatePage} /> <Route path='index' component={AssemblyCategoriesIndexPage} /> </Route> <Route path='create' component={AssemblyCreatePage} /> <Route path='index/:categoryId' component={AssemblyIndexPage} /> </Route> ) } } // In your Router file import AssembliesRoutes from './AssembliesRoutes'; <Router history={browserHistory}> <Route path='/' component={Layout}> <Route path='signup' component={SignupPage} /> <Route path='graphs' component={GraphShowPage} /> <AssembliesRoutes /> </Route> </Router> 

Answer 3

Yes, you can create a custom Route component. This is a kind of hacking because the jet router v3 is hacked, but it is possible. Here is an example:

 import React from 'react'; import { IndexRoute, Route } from 'react-router'; import { createRoutesFromReactChildren } from 'react-router/lib//RouteUtils'; const CrudRoute = () => <div>&lt;CrudRoute&gt; elements are for configuration only and should not be rendered</div>; CrudRoute.createRouteFromReactElement = (element, parentRoute) => { const { path, list, edit, create, remove } = element.props; // dynamically add crud routes const crudRoute = createRoutesFromReactChildren( <Route path={path}> <IndexRoute component={list} /> <Route path="create" component={create} /> <Route path=":id" component={edit} /> <Route path=":id/remove" component={remove} /> </Route>, parentRoute )[0]; // higher-order component to pass path as resource to components crudRoute.component = ({ children }) => ( <div> {React.Children.map(children, child => React.cloneElement(child, { path }))} </div> ); return crudRoute; }; export default CrudRoute; 

Use this custom route as follows:

 import CrudRoute from './CrudRoute'; <Router history={history}> <CrudRoute path="posts" list={PostList} create={PostCreate} edit={PostEdit} remove={PostRemove} /> <CrudRoute path="comments" list={CommentList} create={CommentCreate} edit={CommentEdit} remove={CommentRemove} /> </Router> 

Read more about this method here: http://marmelab.com/blog/2016/09/20/custom-react-router-component.html

React-router v4 will make it extremely simple, since the fake <Route> component disappears and leaves the path to the true React <Match> component.