DEV Community

Cover image for Setup nested routes in react
Akshat Singhania
Akshat Singhania

Posted on • Updated on

Setup nested routes in react

Setup nested routes in react

reactrouterdom, reactjs, nestedrouting, react

all the files used are here https://codesandbox.io/s/setup-nested-routes-in-react-j80to

Using routes in a single file in a big react project is a huge mess and a lot of work

So the solutions comes as nested routing
in simpler terms routes in different files one inside another

file structure img

In the above file structure , the routes in the Auth.js gets imported in the Routes.js file

Route.js

import React from 'react';
import { BrowserRouter as Router, Switch } from 'react-router-dom';
import Auth from './auth/Auth';

const Routes = () => {
    return (
        <Router>
            <Switch>
                <Route path={`/auth`} component={Auth} />
                <Route path={`/`}>
                    <h1>Home</h1>
                </Route>
            </Switch>
        </Router>
    );
};

export default Routes;
Enter fullscreen mode Exit fullscreen mode

The Route.js component will contain basic router code but the magic will happen in Auth.js

We start with creating a switch will hold multiple routes

Auth.js

import React from 'react';
import { Switch } from 'react-router-dom';

const Auth = () => {
    return <Switch></Switch>;
};

export default Auth;
Enter fullscreen mode Exit fullscreen mode

then add the required routes to it

import React from 'react';
import { Switch, Route } from 'react-router-dom';

const Auth = () => {
    return (
        <Switch>
            <Route>
                <h1>Login Page</h1>
            </Route>
            <Route>
                <h1>Register Page</h1>
            </Route>
        </Switch>
    );
};

export default Auth;
Enter fullscreen mode Exit fullscreen mode

then we will add a useRouteMatch function from react-router-dom
the useRouteMatch function will give us a path and a url what we will be needing is the path var

import React from 'react';
import { Switch, useRouteMatch, Route } from 'react-router-dom';

const Auth = () => {
    const { path } = useRouteMatch();
    return (
        <Switch>
            <Route>
                <h1>Login Page</h1>
            </Route>
            <Route>
                <h1>Register Page</h1>
            </Route>
        </Switch>
    );
};

export default Auth;
Enter fullscreen mode Exit fullscreen mode

then we will add path to the routes , the path will be useRoutesMatch path + /whatever_the_sub_path_is

import React from 'react';
import { Switch, useRouteMatch } from 'react-router-dom';

const Auth = () => {
    const { path } = useRouteMatch();
    return (
        <Switch>
            <Route path={`${path}/login`}>
                <h1>Login Page</h1>
            </Route>
            <Route path={`${path}/register`}>
                <h1>Register Page</h1>
            </Route>
        </Switch>
    );
};

export default Auth;
Enter fullscreen mode Exit fullscreen mode

Whats useRouteMatch?

useRouteMatch is provided by react-router-dom
which gives use a object

if you log the value of useRouteMatch
you will get something like this

{ "path: "/auth", "url": "/auth", "isExact": false }
Enter fullscreen mode Exit fullscreen mode

the path variable gives us the path we mentioned in the Routes.js file here

<Route path={`/auth`} component={Auth} />
                ^
Enter fullscreen mode Exit fullscreen mode

then the route we mentioned in the Auth.js file

<Route path={`${path}/login`}>
    <h1>Login Page</h1>
</Route>
Enter fullscreen mode Exit fullscreen mode

if we log ${path}/login it will give us /auth/login
also make sure to not put a / in the parent route it will make the sub route = /auth//login
which cause problems

this simple nesting can be used in a bigger project without causing mess in a single file

Thanks for reading , hearts ❤️ if you liked it , follow if you loved it

Discussion (7)

Collapse
starjardin profile image
Tantely Andrianarivola

Wow, I am still very new to react. This is actually very interesting to me!

Collapse
akshatsinghania profile image
Akshat Singhania Author

glad you liked it , the world of react is very interesting

Collapse
starjardin profile image
Tantely Andrianarivola

I am very interested in react. I am currently discovering a little in react native. Do you have any suggestion what tools I should use with react and react native. Should you have any ideas, please do help me. I would really appreciate them. Thanks.

Collapse
nodeme profile image
dannyel-zhelyazkov

Hello, great article, but I think that you misspelled Router with Routes

Collapse
akshatsinghania profile image
Akshat Singhania Author

oops , thanks for informing

Collapse
akshatsinghania profile image
Akshat Singhania Author • Edited

Imagine searching your own blogs up on how to make a nested react router coz you forgot how it was done

Collapse
akshatsinghania profile image
Akshat Singhania Author

coming back 3rd time to read my own blog lmao