text: 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.
  - Firstly navigate to the “index.js” file and import the BrowserRouter from react-router-dom package
  import {BrowserRouter as Router} from 'react-router-dom';
  After that you should surround the app component(App.js) with our Router component
  <Router> <App /> </Router>
  - 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> ) }
  - 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>
  After that Navigate to NotesRoutes component again and define the Route that we are going to handle
  NotesRoutes.js
  <Route exact <Notes /> </Route>
  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> ) }
  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>
  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 <Notes /> </Route> <Route> <PageNotFound /> </Route> </Switch> ) }
  - 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