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
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;
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;
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;
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;
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;
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 }
the path variable gives us the path we mentioned in the Routes.js file here
<Route path={`/auth`} component={Auth} />
^
then the route we mentioned in the Auth.js file
<Route path={`${path}/login`}>
<h1>Login Page</h1>
</Route>
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)
Wow, I am still very new to react. This is actually very interesting to me!
glad you liked it , the world of react is very interesting
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.
Imagine searching your own blogs up on how to make a nested react router coz you forgot how it was done
coming back 3rd time to read my own blog lmao
yet again
yet again
Hello, great article, but I think that you misspelled Router with Routes
oops , thanks for informing