Wrapping application routes for children with React-Router-4

Question

When using react-router (version 3), I was able to create nested routes, as the wrapper component received the children. I was able, this way, the use a "global" reducer for the root component, as every child component had it's own reducer:

<Provider store={store}>
    <Router key={Math.random()} history={browserHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={MainPage}/>
            <Route path="mainPage" component={MainPage}/>
            <Route path="secPage" component={SecPage}/>
            <Route path="*" component={MainPage}/>
        </Route>
    </Router>
</Provider>

And inside the root component:

render() {
        return (
        <div className="app-wrapper">
            {this.props.children}
        </div>
    );
}

I upgraded the router to use version 4:

<Provider store={store}>
    <Router history={history}>
        <div>
            <Route exact path="/" component={MainPage}/>
            <Route path="secPage" component={SecPage}/>
            <Route path="mainPage" component={MainPage}/>
        </div>
    </Router>
</Provider>

And as you can see- my routes are now "Flat", so I can't really use the root component, and therefor need the use the "globalReducer" for each Component.

How can I use the same method as before? or at least something close to it?

score 2 · Answer 1 · answered Apr 12 '17 at 11:43

Just found a solution- wrapping the child routes with the root component:

<Provider store={store}>
    <Router history={history}>
        <App>
            <Route exact path="/" component={MainPage}/>
            <Route path="mainPage" component={MainPage}/>
            <Route path="secPage" component={SecPage}/>
        </App>
    </Router>
</Provider>

GMKHussain · Answer 2 · 2022-09-28T06:58:09.397

Layout component.

const DefaultLayout = ({ children }) => {
    return (
        <>
            <main id="mainWrapper">
                {children}
            </main>
        </>
    );
};

export default DefaultLayout;

If you are using react-router-dom v5

<Switch>
    <DefaultLayout>
        <Route exact path="/" component={MainPage}/>
        <Route path="mainPage" component={MainPage}/>
        <Route path="secPage" component={SecPage}/>
    </DefaultLayout>
    <AuthLayout>
        <Route path="login" component={Login}/>
    </AuthLayout>
</Switch>

If you are using react-router-dom v6

<Router>
    <Routes>
        <Route exact path="/" element={<DefaultLayout><MainPage/></DefaultLayout>} />
        <Route path="mainPage" element={<DefaultLayout><MainPage/></DefaultLayout>} />
        <Route path="SecPage" element={<DefaultLayout><SecPage/></DefaultLayout>} />
        <Route path="Login" element={<AuthLayout><Login/></AuthLayout>} />
    </Routes>
</Router>

Wrapping application routes for children with React-Router-4

2 Answers2