. Advertisement .
..3..
. Advertisement .
..4..
To route in react, a standard library known as react router is used. It allows the navigation among the views of different components in the react app. With this, you can even change the URL of the browser, meanwhile keeping the user interface synced with the URL. Today, we shed light on how to get the current route using React Router.
How to get the current route using React Router?
To get the current route using React Router, you need to use the ‘useLocation()’ hook, like ‘const location = useLocation(). You can get the current ‘location’ object in return by the hook. Pathname can be accessed as ‘location.pathname’. Check out the code
Using const location = useLocation() and 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>;
}
To get the current location object, we used the ‘useLocation’ hook. Some properties that can be accessed on the object ‘location’ includes
- ‘
pathname’ – shows the current name of the path, e.g. ‘/users’ - ‘
search’ – displays the current query string, e.eg. ‘?page=10’ - ‘
Hash’ – shows the current hash, e.g. ‘#example’.
Wrap the App in the Router
You need to wrap the app in ‘router’ in your ‘index.js’ when you are using react router hook. The index.js file is recommended as it is the starting point of the react application. Look at the code
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 you wrapped the complete app with the component of the ‘Router’, you can easily use any of the hooks from the react router package at any place in the components.
The useParams Hook
This hook is used in the case of the dynamic route. It can also be used if you are trying to access the ID of the dynamic route. With the useParams hook, you can get the object of key-value pairs from the URL(from the dynamic params) matched by the ‘<Route Path>’.
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>;
}
To get the Id, we use the ‘useParams’ when a user navigates to ‘/users/some-id’.
function Users() {
// get ID from url
const params = useParams();
console.log(params); // {userId: '12345'}
return <h2>userId is {params.userId}</h2>;
}
Conclusion
So, we end up with the complete process to get the current route using react router. Hope it helps!
Leave a comment