Get the current URL and Route in React and React Router

avatar
Borislav Hadzhiev

Last updated: Apr 7, 2024
3 min

banner

# Table of Contents

  1. Get the current URL and Pathname in React
  2. Get the current Route using React Router
  3. Get the current route in React Router using dynamic routes

# Get the current URL and Pathname in React

Use the window object to get the current URL in React, e.g. window.location.href returns a string containing the whole URL. If you need to access the path, use window.location.pathname.

The pathname property returns a string containing the path of the URL for the location.

App.js
export default function App() { // ๐Ÿ‘‡๏ธ http://localhost:3001/about console.log(window.location.href); // ๐Ÿ‘‡๏ธ /about console.log(window.location.pathname); // ๐Ÿ‘‡๏ธ http: console.log(window.location.protocol); // localhost console.log(window.location.hostname); return ( <div> <div> <h2>Current URL ๐Ÿ‘‰๏ธ {window.location.href}</h2> <h2>Current Pathname ๐Ÿ‘‰๏ธ {window.location.pathname}</h2> <h2>Current Protocol ๐Ÿ‘‰๏ธ {window.location.protocol}</h2> <h2>Current hostname ๐Ÿ‘‰๏ธ {window.location.hostname}</h2> </div> </div> ); }

get current url and pathname

We can get the full, current URL and the pathname on the window.location object.

App.js
// ๐Ÿ‘‡๏ธ without React router // ๐Ÿ‘‡๏ธ http://localhost:3001/about console.log(window.location.href); // ๐Ÿ‘‡๏ธ /about console.log(window.location.pathname); // ๐Ÿ‘‡๏ธ http: console.log(window.location.protocol); // ๐Ÿ‘‡๏ธ localhost console.log(window.location.hostname);
  • location.href - returns a string containing the whole URL and allows the href to be updated.

  • location.pathname - returns a string containing the path of the URL for the location which is an empty string if there is no path.

  • location.protocol - returns the protocol of the location - http: or https:.

  • location.hostname - returns the domain of the URL.

# Get the current route using React Router

Use the useLocation() hook to get the current route with React Router. The hook returns the current location object.

For example, you can access the pathname as location.pathname.

App.js
import React from 'react'; import {Route, Link, Routes, useLocation} from 'react-router-dom'; export default function App() { const location = useLocation(); console.log('hash', location.hash); console.log('pathname', location.pathname); console.log('search', location.search); return ( <div> <div> <h2>Current Pathname ๐Ÿ‘‰๏ธ {location.pathname}</h2> <h2>Current Search params ๐Ÿ‘‰๏ธ {location.search}</h2> <h2>Current Hash ๐Ÿ‘‰๏ธ {location.hash}</h2> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/users?page=10">Users</Link> </li> <li> <Link to="/users?page=10#myHash">Users with hash</Link> </li> </ul> </nav> <Routes> <Route path="/about" element={<About />} /> <Route path="/" element={<Home />} /> </Routes> </div> </div> ); } function Home() { return <h2>Home</h2>; } function About() { return <h2>About</h2>; }

react router get current route

We used the useLocation hook to get the current location object.

Some of the properties you can access on the location object are:

  • pathname - the current pathname, e.g. /users
  • search - the current query string, e.g. ?page=10
  • hash - the current hash, e.g. #example.
If you need to get the full URL, e.g. https://bobbyhadz.com, use window.location.href instead.
App.js
// ๐Ÿ‘‡๏ธ https://bobbyhadz.com console.log(window.location.href);

# Wrap your React application in a Router component

If you use this approach, make sure to wrap your application in a Router component in your index.js file.

index.js
import {createRoot} from 'react-dom/client'; import App from './App'; import {BrowserRouter as Router} from 'react-router-dom'; const rootElement = document.getElementById('root'); const root = createRoot(rootElement); // ๐Ÿ‘‡๏ธ Wrap the App component in a Router root.render( <Router> <App /> </Router> );
The best place to wrap your React app with a Router component is in your index.js file because that's the entry point of your React application.

Once your entire app is wrapped with a Router component, you can use any of the hooks from the React router package anywhere in your components.

# Get the current route in React Router using dynamic routes

If you have a dynamic route and are trying to access its ID, use the useParams hook.

App.js
import React from 'react'; import {Route, Link, Routes, useParams} from 'react-router-dom'; function Users() { // ๐Ÿ‘‡๏ธ get ID from the URL const params = useParams(); console.log(params); // ๐Ÿ‘‰๏ธ {userId: '12345'} return <h2>userId is ๐Ÿ‘‰๏ธ {params.userId}</h2>; } export default function App() { return ( <div> <div> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> {/* ๐Ÿ‘‡๏ธ link to dynamic path */} <Link to="/users/12345">Users</Link> </li> </ul> </nav> <Routes> <Route path="/about" element={<About />} /> {/* ๐Ÿ‘‡๏ธ handle dynamic path */} <Route path="/users/:userId" element={<Users />} /> <Route path="/" element={<Home />} /> </Routes> </div> </div> ); } function Home() { return <h2>Home</h2>; } function About() { return <h2>About</h2>; }

get dynamic route id

The useParams hook returns an object of key-value pairs of the dynamic params from the current URL that were matched by the <Route path>.

App.js
const params = useParams();

Notice that we set a dynamic path prop on the Route component that renders the Users component - <Route path="/users/:userId" element={<Users />} />.

When the visitor navigates to /users/some-id, we can use the useParams hook to get the ID.

App.js
function Users() { // ๐Ÿ‘‡๏ธ get the ID from the URL const params = useParams(); console.log(params); // ๐Ÿ‘‰๏ธ {userId: '12345'} return <h2>userId is ๐Ÿ‘‰๏ธ {params.userId}</h2>; }

The route would match anything after /users/, e.g. /users/123 or /users/asdf.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev