Как разделить маршруты внутри приложения React

У меня есть следующее на моем index.js

<Router  routes = {routes} />

I would like to have routes section in a separate file, so far I tried this:
routes.js

export default (
    <div>
        <Route path = "/" component = {AppComponent}>
            <Route path = "/someother" component = {AddProductComponent} />
        </Route>

        <Route path = "/products" component = {ListProductComponent} />
    </div>
);

и в index.js

import routes from './routes';
<Router  routes = {routes} />

По какой-то причине приложение теперь отображается пустым. похоже, что маршруты не отображаются.

ОБНОВЛЕНИЕ, это весь мой index.js, за исключением отсутствующего импорта из-за компоновки stackoverflow о слишком большом количестве кода:

const rootReducer = combineReducers({
    products: productReducer,
});

const store = createStore(
    rootReducer,
    applyMiddleware(thunk),
);

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

Обновить route.js

export default (
    <Switch>
       <Route exact path = "/" component = {AppComponent}/>

        <Route path = "/products" component = {ListProductComponent}>
            <Route path = "/details/:productId" component = {AddProductComponent} />
        </Route>
    </Switch>
);