Warning: session_start(): open(/tmp/sess_64434664e696d9623d38b96a085e86aa, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
How To Get The Current URL And Pathname In React? - LearnShareIT

How To Get The Current URL And Pathname In React?

Get the current URL and Pathname in React

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 tutorialYou can use the window.location method or use the useLocation() hook that provides by react-router.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *