. Advertisement .
..3..
. Advertisement .
..4..
Being a library of JavaScript, it is used by developers or newbies as it is a free and open-source front-end JavaScript. React has overshadowed all other front-end frameworks as it is the easier language that helps create a dynamic application with lesser coding and more functionality as compared to JavaScript. Beginners try different projects to become pro in react, and to get the current URL and Pathname in React is one of those projects that you may be looking to work on.
Let’s Check out how to get the current URL and Pathname
How To get the current URL and Pathname in React
If you want to get the current URL, you need to use the ‘window’ object. Use ‘window.location.href’ to get a string in the return that contains the whole URL. To get the path, you should use ‘window.location.pathname’. With the ‘pathname’ property, you get a string in return that holds that pathname of the URL location.
Using ‘ window.location.href’ and ‘window.location.pathname’
See the example
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>;
}
Output
current URL http://localhost:3001/
current Pathname /
You will a string containing the whole URL in return when using the ‘location.href’ property that can also update the ‘href’. Whereas the property ‘location.pathname’, you can get the path of the URL in return. The string remains empty if there is no path.
Using the ‘useLocation’ hook
To get the current location of the object when using React router, you need to use the ‘useLoocation’ hook. Have a look at the example
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 are using this hook, you will be needing to wrap the application in the ‘index.js’ that is in the ‘Router’ component. You can do this like this
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>
);
When your app is wrapped with the ‘Router’ component, any of the hooks can be used from the react router package anywhere in the component.
Conclusion
And that’s the best way to get the current URL and Pathname in React. You can just look at the code to check where you are stuck or if you are just starting this project, take the reference.
Best of luck with the coding!
Leave a comment