Get the current URL and Pathname in React

avatar

Borislav Hadzhiev

Last updated: Apr 29, 2022

banner

Photo from Unsplash

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
import React from 'react'; import {Route, Link, Routes, useLocation} from 'react-router-dom'; export default function App() { // 👇️ WITHOUT React router console.log('current URL 👉️', window.location.href); console.log('current Pathname 👉️', window.location.pathname); // 👇️ with React router const location = useLocation(); console.log('hash', location.hash); console.log('pathname', location.pathname); console.log('search', location.search); return ( <div> <div> <h2>Current URL 👉️ {window.location.href}</h2> <h2>Current Pathname 👉️ {window.location.pathname}</h2> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</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>; }

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 console.log('current URL 👉️', window.location.href); console.log('current Pathname 👉️', window.location.pathname);

react get current url pathname

The location.href property returns a string containing the whole URL and allows the href to be updated.

The location.pathname property returns a string containing the path of the URL for the location, which is an empty string if there is no path.

If you use React router, you can access the current location object via the useLocation hook.

App.js
import React from 'react'; import {Route, Link, Routes, useLocation} from 'react-router-dom'; export default function App() { // 👇️ with React router const location = useLocation(); console.log('hash', location.hash); console.log('pathname', location.pathname); console.log('search', location.search); return ( <div> <div> <h2>Current URL 👉️ {window.location.href}</h2> <h2>Current Pathname 👉️ {window.location.pathname}</h2> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</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>; }

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 App in 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.

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.