How to separate routes from index.js in React

Question

I am trying to separate my routes to a separate file using the following code in index.js:

import routes from './routes';
ReactDOM.render(
    <Provider store={store}>
        <Router routes={routes}/>
    </Provider>
    , document.getElementById('root')
);

my routes.js looks like this:

export default (
    <Switch>
        <Route exact path="/" component={AppComponent}/>
        <Route exact path="/products" component={ProductContainer}/>
        <Route path="/products/:productId" component={AddProductComponent}/>
    </Switch>
);

For some reason my page appears blank with this code.

It works perfectly fine if I just wrap all routes inside index.js like this:

ReactDOM.render(
    <Provider store={store}>
        <Router>
            <Switch>
                <Route exact path="/" component={AppComponent}/>
                <Route exact path="/products" component={ProductContainer}/>
                <Route path="/products/:productId" component={AddProductComponent}/>
            </Switch>
        </Router>
    </Provider>
    , document.getElementById('root')
);

I would keep it like this, but I would also want to separate into a single file route handling.

Answer 1

Router is just a React component that allows for children prop. Render your routes as a component:

import Routes from './routes';
ReactDOM.render(
  <Provider store={store}>
    <Router>
      <Routes />
    </Router>
  </Provider>
  , document.getElementById('root')
);

Here a sample working codesandbox to play: https://codesandbox.io/s/ywvn59y7rj

Answer 2

More detailed answer, changing routes.js to

class Routes extends React.Component {
    render() {
        return (
            <Switch>
                <Route exact path="/" component={AppComponent}/>
                <Route exact path="/products" component={ProductContainer}/>
                <Route path="/products/:productId" component={AddProductComponent}/>
            </Switch>
        )
    }
}
 export default Routes;

and changing index.js to:

ReactDOM.render(
    <Provider store={store}>
        <Router>
            <Routes/>
        </Router>
    </Provider>
    , document.getElementById('root')
);

worked perfectly fine. I hope this would help anybody

Answer 3

Another option wich is easier to maintain is storing routes as JSON like objects in an array and then loop over them.

routes.js

import AppComponent from 'xxx'
export default const routes = [
  {
    path: '/',
    component: AppComponent,
    exact: true
  }
  // and so on
]

index.js

import routes from './routes';
ReactDOM.render(
  <Provider store={store}>
    <Router>
      {routes.map({path, component, exact} => (
        <Route exact={exact} path={path} component={component}/>
      )}
    </Router>
  </Provider>
  , document.getElementById('root')
);