React Page Navigation with react-router-dom

Before going further into our topics, we have to deal with the react page navigation with react-router-dom.

After this setup is completed we are all free to create designs.

How to create React Page Navigation?

• First, we need to install a package called react-router-dom.

npm i react-router-dom        

• In order to create page navigation we need to export {BrowserRouter, Routes, Route} from the react-router-dom.

import {BrowserRouter, Routes, Route} from 'react-router-dom';        

• Then we need to create paths for different pages.

const App = () =>{
  return (<>
    <BrowserRouter>
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route path='/about' element={<About />}/>
        <Route path='/contact' element={<Contact />}/>
        <Route path='/service' element={<Service />}/>
        <Route path='/register' element={<Register />}/>
        <Route path='/login' element={<Login />}/>
        <Route path='/*' element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  </>)
}        

Here, BrowserRouter is the main heading component with Routes for setting up different routes.

Route helps to set individual routes for different pages.

Here, at last, we have created a 404 page also for handling errors.

You can check this by going to different paths.

localhost:5173/login        

• Make the pages inside the src/pages

pages
  -Home.jsx
  -Contact.jsx 
and other pages like this.        

Conclusion

Now, you have successfully created react page navigation to navigate to different pages.