DEV Community

loading...
Cover image for Setup nested routes in react

Setup nested routes in react

akshatsinghania profile image Akshat Singhania Updated on ・2 min read

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 (6)

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
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
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

Forem Open with the Forem app