Welcome, to the React Page Navigation with React Router DOM in our MERN Stack Application. React Router DOM is a library that provides navigation and routing functionalities to React applications. It allows developers to create a single-page application with dynamic, client-side routing, enabling a more seamless and responsive user experience.
1: We need to install the react-router-dom package in order to create the navigation possible in our react.js.
https://www.npmjs.com/package/react-router-dom
2: Here is the complete in-depth info about the react-router components we are going to use in our react app to create an page navigation. https://reactrouter.com/en/main/router-components/browser-router
Now, we need to update our App.jsx file
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Home } from "./pages/Home";
import { About } from "./pages/About";
import { Contact } from "./pages/Contact";
import { Service } from "./pages/Service";
import { Register } from "./pages/Register";
import { Login } from "./pages/Login";
//subscribe thapatechnical channel for more awesome content.
const App = () => {
return (
<Router>
<Routes>
<Route 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 />} />
</Routes>
</Router>
);
};
export default App;Once it's done, now it's time for us to create a different pages for each route that we define in our app.jsx file. Then only we can navigate to that pages right.
So, Here are the pages.
1: Homepage.jsx
export const Home = () => {
return <h1>Hello Home Page</h1>;
};2: About page
export const About = () => {
return <h1>About Page</h1>;
};3: Guys rest are same, you just need to change the file name with the one we want as a page in our react app.