Navigation routing in React is quite different from how it\u2019s done in web development using the HTML anchor tag. This is because React is used to build single-page applications\u2014meaning our application only loads once in our browser. This means we need a routing mechanism or logic to handle all forms of routing.<\/p>\n\n\n\n
In other JavaScript frameworks like Vue, this routing logic is built by the same team that works on the core framework, meaning that we don’t need an externally written package or dependency. In React, there is no official package to handle routing; instead, we depend on the most popular and standard library, React Router.<\/p>\n\n\n\n
React Router allows the browser URL to be changed and ensures the UI is in sync with the URL. It was built by Ryan Florence<\/a> and Michael Jackson<\/a>, who founded Remix<\/a> to take React Router to the next level. They recently launched React Router version 6<\/a>, whose usage has grown massively over the past year with over 8 million weekly downloads<\/a> at the time of writing. Today, React Router is maintained by Remix<\/a> and hundreds of other contributors<\/a>.<\/p>\n\n\n\n This guide will teach you how to use React Router within your React project. We will learn how to implement React Router to ensure smooth routing within our single-page application. At the end of this guide, we will shed light on the future of React Router and how Remix plans to re-shape routing with React Router in future versions.<\/p>\n\n\n\n In this article, we will learn how to:<\/p>\n\n\n\n React Router is an external library that needs to be installed into our React application for us to use. We can do this by running either of the commands below in our terminal within our project’s directory:<\/p>\n\n\n When we install the React Router package within our project, we will have access to all its components and hooks; we can now use these hooks and components within our application to enable single-page routing.<\/p>\n\n\n\n Once we have successfully installed this package, we can check our To use React Router within our application, we need to wrap the top-level component in our React applications component hierarchy, also known as the root component ( To wrap our root component, we can do this in the If we want to do this in our We need to configure our routes to implement routing between components in our React application. Not all components will be a view (or rather, a page), so we need to declare which component is a view and assign a path to each.<\/p>\n\n\n\n We do this with two major components, which are: <\/p>\n\n\n\n – – Suppose we have three components (Home, About, and Blog). Let’s configure routes for them in the We first imported the two React Router components ( At this point, we can now navigate through our application via the URL. For example, if we navigate to In a real-world web application, we would not want users to navigate through routes via the URL, as that’s cumbersome to navigate. We have some components that make it easy to access these routes. Just like we have the anchor tag ( To use the This works for all configured We can also pass state data via our Install React Router<\/h2>\n\n\n\n
\/\/ Using npm<\/span>\n$ npm install react-router-dom@6<\/span>\n\n\/\/ Or<\/span>\n\n\/\/ Using Yarn<\/span>\n$ yarn add react-router-dom@6<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\npackage.json<\/code> file to confirm if it installed, and which version we have installed, within our dependencies<\/code> object:<\/p>\n\n\n\"dependencies\"<\/span>: {\n\u00a0 \u00a0 \/\/ rest of the dependencies installed<\/span>\n\u00a0 \u00a0 \"react-router-dom\"<\/span>: \"^6.3.0\"<\/span>,\n\u00a0 },<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nSet Up and Access Browser URL<\/h2>\n\n\n\n
App.js<\/code>), with BrowserRouter<\/code>. <\/p>\n\n\n\nBrowserRouter<\/code> is a router implementation that uses the HTML5 History API<\/a>, which comprises the pushState<\/code><\/a>,<\/code>replaceState<\/code><\/a>, and<\/code> popstate<\/code><\/a> events. This History API helps track route history, keeping our UI in sync with the URL.<\/p>\n\n\n\nApp.js<\/code> or index.js<\/code> file. First, we would import BrowserRouter<\/code> from react-router-dom<\/code> in any of the components we wish to wrap. Let’s do this in our index.js<\/code> file:<\/p>\n\n\n\/\/ index.js<\/span>\n\/\/ other imports<\/span>\nimport<\/span> { BrowserRouter } from<\/span> 'react-router-dom'<\/span>;\n\nconst<\/span> root = ReactDOM.createRoot(document<\/span>.getElementById('root'<\/span>));\nroot.render(\n <React.StrictMode<\/span>><\/span>\n <BrowserRouter<\/span>><\/span>\n <App<\/span> \/><\/span>\n <\/BrowserRouter<\/span>><\/span>\n <\/React.StrictMode<\/span>><\/span><\/span>\n);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nApp.js<\/code> file, we just need to ensure that everything in our App.js<\/code> file is wrapped with <BrowserRouter><\/code>:<\/p>\n\n\n\/\/ App.js<\/span>\nimport<\/span> { BrowserRouter } from<\/span> \"react-router-dom\"<\/span>\n\nconst<\/span> App = ()<\/span> =><\/span> {\n return<\/span> (\n <BrowserRouter<\/span>><\/span>\n {\/* ... *\/}\n <\/BrowserRouter<\/span>><\/span><\/span>\n );\n};\n\nexport<\/span> default<\/span> App;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nConfigure And Create Routes<\/h2>\n\n\n\n
Routes<\/code><\/a>: This is the parent component that wraps all our configuredRoutecomponents. <\/code>This component is what React looks for when the location changes to access its children <Route><\/code> elements to find the best match and render that branch of the UI.<\/p>\n\n\n\nRoute<\/code><\/a>: This is the component used to declare a specific location. It holds two props which are the path and element props. The path props hold the path we would use to access the specified element. The element can be a markup or a component.<\/p>\n\n\n\nApp.js<\/code> file:<\/p>\n\n\n\/\/ App.js<\/span>\n\nimport<\/span> { Routes, Route } from<\/span> 'react-router-dom'<\/span>;\nimport<\/span> Home from<\/span> '.\/pages\/Home'<\/span>;\nimport<\/span> About from<\/span> '.\/pages\/About'<\/span>;\nimport<\/span> Blog from<\/span> '.\/pages\/Blog'<\/span>;\n\nconst<\/span> App = ()<\/span> =><\/span> {\n\u00a0 return<\/span> (\n\u00a0 \u00a0 <div<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 <Routes<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 <Route<\/span> path<\/span>=\"\/\"<\/span> element<\/span>={<\/span><Home<\/span> \/><\/span>} \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <Route<\/span> path<\/span>=\"\/about\"<\/span> element<\/span>={<\/span><About<\/span> \/><\/span>} \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <Route<\/span> path<\/span>=\"\/blog\"<\/span> element<\/span>={<\/span><Blog<\/span> \/><\/span>} \/>\n\u00a0 \u00a0 \u00a0 <\/Routes<\/span>><\/span>\n\u00a0 \u00a0 <\/div<\/span>><\/span><\/span>\n\u00a0 );\n};\n\nexport<\/span> default<\/span> App;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nRoutes<\/code> and Route<\/code>) from react-router-dom<\/code> in the above code. Then we import the components we would add to the element<\/code> prop of each Route<\/code> we configure. <\/p>\n\n\n\n\/about<\/code>, the About<\/code> component will show. If we navigate to \/blog<\/code>, the Blog<\/code> component will appear.<\/p>\n\n\n\nAccess Configured Routes<\/h2>\n\n\n\n
<a><\/code><\/a>) in HTML5, we also have components like Link<\/code><\/a> in React Router, which we can use to access our routes.<\/p>\n\n\n\nHow to Use The Link Component<\/h3>\n\n\n\n
Link<\/code> component, we first need to import it from react-router-dom<\/code>. This component takes in an important prop, the to<\/code> prop. The to<\/code> prop is used to set the component we want our UI to load:<\/p>\n\n\n<!-- pages\/Home.js --><\/span>\n\nimport { Link } from 'react-router-dom';\n\nconst Home = () => {\n\u00a0 \u00a0 return (\n\u00a0 \u00a0 \u00a0 \u00a0 <div<\/span> className<\/span>=\"container\"<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <h2<\/span>><\/span>Home Page<\/h2<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <Link<\/span> to<\/span>=\"\/about\"<\/span> className<\/span>=\"btn\"<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 About Page\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/Link<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/div<\/span>><\/span>\n\u00a0 \u00a0 );\n};\n\nexport default Home;<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\npath<\/code>s. We must ensure that the value passed into the to<\/code> prop matches a configured Route path<\/code>.<\/p>\n\n\n\nPassing State Data Through Links<\/h3>\n\n\n\n
Link<\/code> component, which we can access in the component we navigate into with the useLocation()<\/code><\/a> router hook:<\/p>\n\n\n