JIYIK CN >

Use useLocation()the hook to get the current route through React Router, for example const location = useLocation(). The hook returns the current location object. For example, we can access the pathname as location.pathname.

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>;
}

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

Some of the properties that can be accessed 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 value, ＃examplee.g.

When using react router hooks, make sure to wrap our application in a router component in the 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 application with the Router component is in the index.js file, since this is the entry point for your React application.

Once your entire app is wrapped in a Router component, you can use any hook from the react router package anywhere in your component.

If you have dynamic routes and try to access their IDs, use useParamsthe hook.

import React from 'react';
import {Route, Link, Routes, useParams} from 'react-router-dom';

function Users() {
  // get ID from 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>;
}

The useParams hook returns <Route path>an object of key-value pairs of dynamic parameters matching the current URL.

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

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

function Users() {
  // get ID from url
  const params = useParams();

  console.log(params); // 👉️ {userId: '12345'}

  return <h2>userId is 👉️ {params.userId}</h2>;
}

This route will match anything after /users/, such as /users/123 or /users/asdf .