Pathname and URL in reacting are very helpful. It will help you find out the address of your page and also help you to manipulate the router. So how to get the current URL and Pathname in React? Let’s go into detail.
Get the current URL and Pathname in React
Solution 1: Use window.location object
You can log window.location and see all property that has inside.
Example:
import "./App.css";
function App() {
console.log(window.location)
return (
<>
</>
)
}
export default App;Output:
Here is the window.location object. You can see that are a whole bunch of properties, and one of them is pathname and href, which contain the URL and can be updated. You can catch those properties by going through the window.location.
Example:
import "./App.css";
function App() {
console.log(window.location)
console.log(window.location.pathname)
console.log(window.location.href)
return (
<>
</>
)
}
export default App;Output:
Solution 2: Use useLocation()
If you are working with a custom URL or location, you can use the useLocation() hook provided in react-router-dom. The useLocaition() hook will return a location object. It also contains the current URL But if you want to use the useLocation() hook, you will have to wrap your component inside a Router.
Example:
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import './index.css'
const router = createBrowserRouter([
{path:"/",
element: <App></App>,},
{path:"/Contact"}
])
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<RouterProvider router={router}></RouterProvider>
</React.StrictMode>
)import React from "react";
import { Link } from "react-router-dom";
import "./App.css";
import { useLocation , } from "react-router-dom";
const App=()=> {
const location = useLocation()
console.log(location)
return (
<>
</>
)
}
export default App;Output:
Here the useLocation() object provides some useful properties like pathname that help you to specify your current pathname. I am on the home page, so the pathname will be “/”. You can also create a new page then the pathname will change.
Example:
import React from "react"
const News = ()=>{
return(<h1>Hello From News Page</h1>)
}
export default News
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import './index.css'
import News from "./routes/News";
const router = createBrowserRouter([
{path:"/",
element: <App></App>,},
{path:"/News",
element:<News></News>}
])
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<RouterProvider router={router}></RouterProvider>
</React.StrictMode>
)import React from "react";
import { Link } from "react-router-dom";
import "./App.css";
import { useLocation , } from "react-router-dom";
const App=()=> {
return (
<>
<ul>
<li><Link to={"/"}>Home</Link></li>
<li><Link to={"/news"}>News</Link></li>
</ul>
</>
)
}
export default App;Output:
Summary
I explained how to get the current URL and Pathname in React in this tutorial. You can use the window.location method or use the useLocation() hook that provides by react-router.
Maybe you are interested:
- How to toggle a Boolean state in React
- Update nested properties in a State object in React
- Use a condition inside map() in React
Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.
Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm