React Router with nested route
Tags: react, webdev, javascript, beginners
Published: 2023-01-08 21:14:10

The Is the documentation of my exam project in ReactJS - Setup react-router, implement Nested routes, 404 page, and Error boundary. Set up fake userAuthContext using the context API to always carry out a fake authentication, bonus - extract out a custom hook to get the currently logged-in user. Implement SEO and Navigation menu that will show on each page.

I commenced the project by entering “npm create react app exam-solution” command inside Gitbash to create exam-solution file, then I typed “code.” inside bash to entered VS code where the app was built.

Most of the work were carried out inside ‘src folder’ and ‘App.js, index.js and index.css’ files, I then set up react-router by running ‘npm install react-router-dom@6’ to install react-router which happens to be the exam first instruction, this makes it possible to import the { BrowserRouter } from ‘react-router-dom’ and also wrapped my ‘App’ with <BrowserRouter></BrowserRouter> you will able to see the codes in the figure 1 below



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ulx1k6ojo2tj7c5dzut.PNG)

In the process of creating the Route which also known as page, I firstly created ‘components’ files where all the React components like ‘Home, Login, Profile, Navbar…’ I used, were set up, see all the components in the figure 1.1 below



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jmyl4zctebx28fzuk6zz.PNG)

Less I forget, I created each components using ‘arrow function’ this is one of the three ways function can be created, here is ‘Home component’ which happens to be one among the components that were created.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8m5rinrf2kcwk3mo6vs4.PNG)

Then I proceeded in creating each Route by firstly importing them into App.js, the reason why these components can be imported into App.js was because of the exporting commands that has been included, this is on the last line of the diagram above.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/une87lpofkyf3rwq3ved.png)

Then I proceeded in creating each Route by wrapping them inside <Routes></Routes>, and each Route path was created using the command ‘<Route path="pathname" element= {<Component />} />’, here is an illustration below


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34byaujw27cqnz50gpu6.png)

Then I proceeded to the next instruction that says we should implement nested routes, nested routes are the process of creating another component inside parent component, and here is the nested route diagram below


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gvh3ptnsre96bkootqr.png)

In the parent route which happens to be ‘Products’, an <Outlet> was imported from ‘react-router-dom’ to render their child route elements, which makes the nested UI to show up when child routes are rendered, it is show in the diagram below


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ncy1wh448kwpss01bq0l.png)

The next instruction here was to create error 404 page, the purpose of creating an error 404 was to handle a route that is not available that user’s click, this was achieved by using asterisk sign “*” as a pathname, see the diagram below for more understanding


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jyxt4k9g40lnfdh7g2fv.png)

This leads us to the next instruction by implementing Error boundary, and I implemented error boundary by firstly running the command ‘install react-error-boundary’ and the purpose of implementing error boundary is to create fallback component incase of any error, visit the diagram below to see the code


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b32z0l96rfwxlcfdkazi.png)

The next instruction I carried out was creating an API auth.js to carried out fake authentication, you can view of the code below


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09iemiyjl8np7y691due.png)

The diagram below shows the component I created to handle the redirection for the fake authentication.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spc4ppnfqattdwk1vgbq.png)

The next instruction I carried out was by creating a custom hook that get the logged in users, checkout the diagram below to see the code of the custom hook


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/656xqoculm2vc309zvil.png)

The next instruction I carried out was SEO implementation, I firstly installed this command ‘npm install -save-react-helmet’ and imported it on all the pages created in order to rank on Google, here is how I implement SEO on ‘Homepage’ component by wrapping the homepage title with <Helmet></Helmet>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5v89t02epsubcfd25k2.png)

The last feature I implemented was by showing all the navigation bar on each pages, this was done by wrapping all the pages in <nav></nav>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ha9wa7x37krsbx29osrb.png)

And here is the navigation bar user interface


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7pj8nmn70pfmd1yxrzjr.png)