React Router: Get the current route

Have you started using React Router for navigation in React and want to know how to access the current route, URL parameters, query parameters, etc? You are at the right place.

Project set up

First, let's create a react app using the following command:

1npx create-react-app react-router-current-route

Now let's install react-router-dom and history packages inside it:

1npm i react-router-dom history

Now in index.js import BrowserRouter component from React router and wrap the App component within it.

index.js

1import React from "react"
2import ReactDOM from "react-dom/client"
3import "./index.css"
4import App from "./App"
5
6import { BrowserRouter } from "react-router-dom"
7
8const root = ReactDOM.createRoot(document.getElementById("root"))
9root.render(
10  <React.StrictMode>
11    <BrowserRouter>
12      <App />
13    </BrowserRouter>
14  </React.StrictMode>
15)

In the App.js, create routes to 4 different pages and add links to them as shown below:

App.js

1import { Link, Route, Routes } from "react-router-dom"
2
3function App() {
4  return (
5    <div className="App">
6      <nav>
7        <ul>
8          <li>
9            <Link to="/">Home</Link>
10          </li>
11          <li>
12            <Link to="dashboard">Dashboard</Link>
13          </li>
14          <li>
15            <Link to="search?term=phones">Search</Link>
16          </li>
17          <li>
18            <Link to="order/12345">Order Details</Link>
19          </li>
20        </ul>
21      </nav>
22      <Routes>
23        <Route path="/" element={<Home />}></Route>
24        <Route path="dashboard" element={<Dashboard />}></Route>
25        <Route path="search" element={<Search />}></Route>
26        <Route path="order/:orderId" element={<OrderDetails />}></Route>
27      </Routes>
28    </div>
29  )
30}
31
32function Home() {
33  return <div>Home</div>
34}
35
36function Dashboard() {
37  return <div>Dashboard</div>
38}
39
40function Search() {
41  return <div>Search</div>
42}
43
44function OrderDetails() {
45  return <div>Order Details</div>
46}
47
48export default App

In the above code, we have:

Dashboard page, where we will be accessing the current route.
Search page with query parameter
Order details page with URL parameter

Accessing current route

React router exports a hook called useLocation, which contains information about the URL.

We can access the current path as shown below:

1function Dashboard() {
2  const location = useLocation()
3  return <div>Location: {location.pathname}</div> // 👉 Location: /dashboard
4}

Accessing the Query parameters

The useLocation hook returns the query parameter inside the search property. However it will be in the format: ?a=b&c=d. We can pass it to URLSearchParams to parse it.

1function useQuery() {
2  // Use the URLSearchParams API to extract the query parameters
3  // useLocation().search will have the query parameters eg: ?foo=bar&a=b
4  return new URLSearchParams(useLocation().search)
5}
6
7function Search() {
8  const query = useQuery()
9  const term = query.get("term")
10
11  return <div>Search term: {term}</div> // 👉 Search term: phones
12}

Accessing the URL parameters

If you want to access the URL parameters like order id, invoice id, etc, first you need to define it in the route:

<Route path="order/:orderId" element={<OrderDetails />}></Route>

Now if you access the path /order/12345, useParams() hook will return the orderId in the Order Details component:

1function OrderDetails() {
2  const { orderId } = useParams()
3  return <div>Order Details: {orderId}</div> // 👉 Order Details: 12345
4}

Complete code

You can to refer the following complete code for all the examples:

App.js

1import { Routes, Route, Link, useParams, useLocation } from "react-router-dom"
2
3function App() {
4  return (
5    <div className="App">
6      {" "}
7      <nav>
8        <ul>
9          <li>
10            <Link to="/">Home</Link>
11          </li>
12          <li>
13            <Link to="dashboard">Dashboard</Link>
14          </li>
15          <li>
16            <Link to="search?term=phones">Search</Link>
17          </li>
18          <li>
19            <Link to="order/12345">Order Details</Link>
20          </li>
21        </ul>
22      </nav>
23      <Routes>
24        <Route path="/" element={<Home />}></Route>
25        <Route path="dashboard" element={<Dashboard />}></Route>
26        <Route path="search" element={<Search />}></Route>
27        <Route path="order/:orderId" element={<OrderDetails />}></Route>
28      </Routes>
29    </div>
30  )
31}
32
33function Home() {
34  return <div>Home</div>
35}
36
37function Dashboard() {
38  const location = useLocation()
39
40  return <div>Location: {location.pathname}</div>
41}
42
43function useQuery() {
44  // Use the URLSearchParams API to extract the query parameters
45  // useLocation().search will have the query parameters eg: ?foo=bar&a=b
46  return new URLSearchParams(useLocation().search)
47}
48
49function Search() {
50  const query = useQuery()
51  const term = query.get("term")
52
53  return <div>Search term: {term}</div>
54}
55
56function OrderDetails() {
57  const { orderId } = useParams()
58  return <div>Order Details: {orderId}</div>
59}
60
61export default App

Do follow me on twitter where I post developer insights more often!

React Router: Get the current route

Table of Contents

Project set up

Accessing current route

Accessing the Query parameters

Accessing the URL parameters

Complete code

Related Articles

Leave a Comment

Tools