DEV Community

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

Posted on • Edited 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

Top comments (9)

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

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
 
akshatsinghania profile image

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

coming back 3rd time to read my own blog lmao

Collapse
 
akshatsinghania profile image
Akshat Singhania

yet again

Thread Thread
 
akshatsinghania profile image
Akshat Singhania

yet again

Collapse
 
nodeme profile image
dannyel-zhelyazkov

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

Collapse
 
akshatsinghania profile image
Akshat Singhania

oops , thanks for informing