React router 4 - how to handle big apps without nesting routes - reactjs

Question

Context: React app with React Router 4.0
Now that the best practice changed and you should not nest routes, but rather include them in Components as seen in the example, I'm wondering how this will turn out in the long run once the app grows. Will it not be superhard to follow the routes / components if you don't have one central place to look for them?
Have you used rr-4 for bigger apps? What's the best practice?
Pretty scary as I already had to do a lot of refactoring moving from rr-2 to rr-4, I wouldn't want to redo everything when it's much more expensive.

Answer 1

meet the problem too, here is the solution that migrate from react-router 3.0:
app.js
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import routes from './routes';
import createBrowserHistory from 'history/createBrowserHistory';
import injectTapEventPlugin from 'react-tap-event-plugin';
import "./css/style.less";
import {Provider} from 'react-redux';
import {ConnectedRouter, routerMiddleware} from 'react-router-redux';
import {Route} from 'react-router';
import store from './store';
import App from 'components/App';
import {load} from 'lib/utils';
import Dispatcher from 'views/Dispatcher';
injectTapEventPlugin();
export const browserHistory = createBrowserHistory();
export const middleware = routerMiddleware(browserHistory);
class MainApp extends React.Component {
render() {
return (
<Provider store={ store }>
<ConnectedRouter history={ browserHistory }>
<Route path="/" render={ (props) => {
routes.onEnter(props);
const { match } = props;
return (
<App>
<Route path={match.url} exact component={ load("Home") }/>
{
routes.childRoutes.map((route,idx) => {
return <Route
path={`${match.url}/${route.path}`} component={ route.component }
key={idx}
exact={ !!route.exact }
/>
})
}
</App>
);
} }/>
</ConnectedRouter>
</Provider>
)
}
}
ReactDOM.render(<MainApp />, document.getElementById("app"));
router.js
import React from 'react';
import App from 'components/App';
const load = (moduleName) => {
const module = require(`views/${moduleName}/index.js`);
return module.default;
};
export default {
path: '/',
component: App,
indexRoute: { component: load('Home'), },
childRoutes: [
{ path: 'home', component: load('Home'), }
]
}