How To Implement Navigation In React JS ? Last Updated : 28 Apr, 2025 Comments Improve Suggest changes Like Article Like Report React router is a powerful library that enables developers to manage navigation in a React application. It provides a way to define the routes and their corresponding components, allowing for a good user experience while navigating between different parts of any application. In this article, we will learn how to navigate routing in React apps. PrerequisitesReactReact RouterReact Router DomApproach to implement Navigation in React JS:Create a new react app as "npx create-react-app myapp".Install react router dom as "npm i react-router-dom".Create a Folder named "Components" inside "src" folder and create three files in it as "About.jsx", "Contact.jsx" ans "Home.jsx".Add provided code to these files.Project Structure: The updated package.json file will look like this "dependencies": { "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.22.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, Example: Below is the code example of the Navigating Routing in MERN Apps: JavaScript // index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter } from 'react-router-dom'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <BrowserRouter> <App /> </BrowserRouter> </React.StrictMode> ); reportWebVitals(); JavaScript // App.js import './App.css'; import { Link, Route, Routes } from 'react-router-dom'; import Home from './Components/Home'; import About from './Components/About'; import Contact from './Components/Contact'; function App() { return ( <div className="App"> <div> <div style={{ display: 'flex', justifyContent: 'space-evenly', background: 'green', fontSize: '20px', }}> <Link to={'/'} style={{ color: 'white' }}> Home </Link> <Link to={'/about'} style={ { color: 'white' }}> About </Link> <Link to={'/contact'} style={ { color: 'white' }}> Contact </Link> </div> </div> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/contact" element={<Contact />} /> </Routes> </div> ); } export default App; JavaScript // Home.jsx import React from 'react' import { Link } from 'react-router-dom' const Home = () => { return ( <div> This is home page </div> ) } export default Home JavaScript // About.jsx import React from 'react' import { Link } from 'react-router-dom' const About = () => { return ( <div> This is about page </div> ) } export default About JavaScript // Contact.jsx import React from 'react' import { Link } from 'react-router-dom' const Contact = () => { return ( <div> This is contact page </div> ) } export default Contact Step to run the App: npm start Output: Open browser and enter the url http://localhost:3000/ Comment More infoAdvertise with us Next Article How To Implement Navigation In React JS ? S shivanshmahajan876 Follow Improve Article Tags : Web Technologies ReactJS React-Questions Similar Reads How to implement pagination in React using Hooks? Implementing pagination in React using hooks involves managing the state of the current page and the number of items per page, as well as rendering the paginated data accordingly. Implementing pagination in React using Hooks:Setup Initial State: Use the useState hook to manage the state for the curr 3 min read React MUI Navigation Components React Material-UI (MUI) is a popular library that provides a set of reusable components for building user interfaces in React applications. These components are based on Material Design, a design system developed by Google that provides guidelines for creating visually appealing, user-friendly inter 3 min read React Native Tab Navigation Component In this article, we are going to see how to implement Tab Navigation in react-native. For this, we are going to use createBottomTabNavigator component. It is basically used for navigation from one page to another. These days mobile apps are made up of a single screen, so create various navigation co 3 min read React MUI Menu Navigation React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based o 4 min read How To Implement Multiple Filters In React ? Applying Filters in React applications is important for enhancing user experience by allowing users to customize the displayed content based on their preferences. In this article, we will explore two approaches to implementing Multiple Filters in React. Table of Content Using State HooksUsing Contex 6 min read Navigate Component in React Router In React applications, navigation between different pages or views is an essential part of creating dynamic user interfaces. React Router is a popular library used for handling routing and navigation. One of the key features of React Router is the Navigate component, which allows for programmatic re 7 min read React MUI Tabs Navigation React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based o 4 min read React MUI Links Navigation React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based o 2 min read React MUI Bottom Navigation React Material UI is an open-source library for the React User Interface components that implement Google's Material Design. It provides a wide range collection of prebuilt, reusable, responsive components which requires less coding and are ready to use for production implementation. It includes bea 4 min read Implement Nested Routes in React.js - React Router DOM V6 Nested routes in React JS provide hierarchical navigation which is implemented using the outlet component in React Router Dom. Routing in React not only provides routing for the pages but also for rendering multiple components inside that page. Nested routes implement this by defining Routes for Chi 4 min read Like