how to integrate react router

Let’s see how to integrate react category router in a react js project

If you have already created your react application and you’re looking to add react router for better controlling the navigation within your application, then you should use react router.

Because react router is far too easy to integrate with a new or an existing react application.

Therefore check out this video for a complete step by step tutorial.

How to install react router ?

As a result to install react router, you should be using the below command.

npm i -g react-router-dom 

As this command is going to install the necessary dependencies for us.

So now once the dependency is installed in our react app we should be able to see the dependency along with the version it takes, inside our

package.json

Therefore the next thing that is important is to understand how react router works, and what all components are there to create a proper integration of the react router.

So please watch the video in this post to understand how the react router works

Finally once we understand the data flow , next is the step to to import the router and create the components.

1. Firstly navigate to the “index.js” file and import the BrowserRouter from react-router-dom package

   import {BrowserRouter as Router} from 'react-router-dom';
   

2. After that you should surround the app component(App.js) with our Router component

   <Router>
      <App />
   </Router>
   

3. So now create the Route component

   NotesRoutes.js

   import React from 'react';
   import { Switch, Route } from 'react-router-dom';
   
   export const NotesRoutes = () => {
       return (
           <Switch>
               
           </Switch>
       )
   }
   

4. Now Inside App.js, we need to display the NotesRoutes component instead of the Notes component . Which in our case is Notes.js component

   App.js

   
   <div>
   <NotesRoutes>
   
   <div>
   

5. After that Navigate to NotesRoutes component again and define the Route that we are going to handle

   NotesRoutes.js

   <Route exact path='/'>
    <Notes />
   </Route>
   

6. So now define a PageNotFound component for URLs we are not going to handle

   PageNotFound.js

   import React from 'react'
   
   export const PageNotFound = () => {
       return (
           
   <div>
       Page not found
   </div>
   
       )
   }
   

7. When the previous step is don navigate to NotesRoutes component and Define a default Route for URLs we are not going to handle

   NotesRoutes.js

   <Route>
      <PageNotFound />
   </Route>
   

8. Finally the NotesRoutes component should look something like this.

   NotesRoutes.js

   import React from 'react';
   import { Switch, Route } from 'react-router-dom';
   
   import { PageNotFound } from './PageNotFound';
   import { Notes } from './Notes';
   
   export const NotesRoutes = () => {
       return (
           <Switch>
              <Route exact path='/'>
                   <Notes />
               </Route>
               <Route>
                   <PageNotFound />
               </Route>
           </Switch>
       )
   }
   
   

9. Finally Save the files, restart the react app and navigate to any route for what we have already written the Router handle for.

   Now that the corresponding component exists in your application, therefore you should be able to se the route coming up.

   Otherwise for urls, which are handled, would be handled through our default Route and thus, PageNotFound will be displayed to the user