How to programmatically navigate using React Router ? Last Updated : 06 May, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report React Router provides a way to navigate between different parts of an application when certain events occur, such as button clicks or form submissions. Programmatically navigating allows us to change the URL of an application without a full page reload, enabling a smoother user experience. We will discuss the different approaches to navigating using React Router: Table of Content Using the useNavigate hookUsing the Link ComponentUsing the useNavigate hookIn this approach, we are using the useNavigate hook to programmatically navigate. This hook provides a navigation function that allows us to navigate to a different route within the application. Syntax:const navigate = useNavigate();navigate('path-name');Example: Below is the implementation for above approach. JavaScript // App.js import React from 'react'; import { Route, Routes } from 'react-router-dom'; import { BrowserRouter } from 'react-router-dom' import MyComponent from './components/MyComponent'; import Profile from './components/Profile'; const App = () => { return ( <BrowserRouter> <Routes> <Route path="/" element={<MyComponent />} /> <Route path="/profile" element={<Profile />} /> </Routes> </BrowserRouter> ); }; export default App; JavaScript // components/MyComponent.js import React from 'react'; import { useNavigate } from 'react-router-dom'; function MyComponent() { const navigate = useNavigate(); function handleClick() { navigate('/profile'); } return ( <> <h1>Welcome to GeeksForGeeks</h1> <button onClick={handleClick}>Go to profile</button> </> ); } export default MyComponent; JavaScript // components/Profile.js import React from 'react'; const Profile = () => { return ( <> <h1>Welcome to Your Profile</h1> <p>This is your profile page. You can view and edit your profile information here. </p> </> ); }; export default Profile; Output: Using the Link ComponentIn this approach we are using the Link component from react-router-dom that allows us to create links that navigate to different routes within React application. The Link component renders an anchor (<a>) tag with an href attribute set to the specified route. Syntax:<Link to="path-name">Example: Below is the implementation for above approach. JavaScript // App.js import React from 'react'; import { Route, Routes } from 'react-router-dom'; import { BrowserRouter } from 'react-router-dom' import MyComponent from './components/MyComponent'; import Profile from './components/Profile'; const App = () => { return ( <BrowserRouter> <Routes> <Route path="/" element={<MyComponent />} /> <Route path="/profile" element={<Profile />} /> </Routes> </BrowserRouter> ); }; export default App; JavaScript // components/MyComponent.js import React from 'react'; import { Link } from 'react-router-dom'; function MyComponent() { return ( <div> <h1>Welcome to GeeksForGeeks</h1> <h3>Navigate using Link component</h3> <Link to="/profile"> <button>Go to profile</button> </Link> </div> ); } export default MyComponent; JavaScript // components/Profile.js import React from 'react'; const Profile = () => { return ( <> <h1>Welcome to Your Profile</h1> <p>This is your profile page. You can view and edit your profile information here. </p> </> ); }; export default Profile; Output: Comment More infoAdvertise with us Next Article How to Use Routing with React Navigation in React Native ? Y yuvrajghule281 Follow Improve Article Tags : Web Technologies ReactJS React-Questions Similar Reads How do you navigate programmatically in Angular? Angular is a popular framework for building dynamic web applications, and one of its important features is its routing system. In Angular, we use a Router module, which allows us to navigate between different components easily. While navigation often occurs as a result of certain user actions like c 3 min read How to Integrate React Router with Remix? Integrating React Router with Remix includes the usage of Remix's integrated router abilities thinking that Remix already uses React Router as its foundation. However, if you want to go beyond number one routing and leverage several React Router's extra precise or advanced skills.You may integrate t 7 min read How to Use Routing with React Navigation in React Native ? Almost every mobile application requires navigating between different screens. React Native provides an elegant and easy-to-use library to add navigation to native applications: react-navigation. It is one of the most popular libraries used for routing and navigating in a React Native application.Tr 4 min read How to Navigate on Path by Button Click in React Router ? Navigation in React JS is done by implementing the routing between components using react-router-dom. To set navigation for components or events like button click, we can use the useHistory Hook provided in the react-router-dom v5.Prerequisites:NPM & Node.jsReact JSReact-Router-DomApproachNaviga 3 min read Create a basic Navbar using React Router v6 React Router is a library for handling routing and navigation in React JS Applications. It allows you to create dynamic routes, providing a seamless user experience by mapping various URLs to components. It enables navigation in a single-page application (SPA) without refreshing the entire page.Reac 4 min read Migrate to React Router v6 React Router v6 brings significant changes and improvements over its predecessor, offering a more intuitive API and better performance. Migrating to React Router v6 might seem daunting, but with proper guidance, the transition can be smooth and beneficial for your React applications. Enhancements in 3 min read Like