React: how to access url's parameters

Question

How can I get the url params from a route? I got this code:

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>

          <Route path="/table/:name/" element={<SortingTable/>}></Route>
          <Route path="" exact element={<BasicTable/>}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

I want to get the name from the url and use it in SortingTable:

  
const SortingTable = ({match}) => {

    let [searchParams, setSearchParams] = useSearchParams();

    const [data, setData] = useState([])
    const [columns, setColumns] = useState([])
    const table = match.params.name //=> undefined

Does this answer your question? [How to get parameter value from query string?](https://stackoverflow.com/questions/35352638/how-to-get-parameter-value-from-query-string) — Rusu Dinu, Feb 21 '23 at 14:45

Mohammadreza Khedri · Answer 1 · 2023-02-21T15:08:25.880

3

You can use the useParams:

const { name } = useParams();

Note: When you want to get the queries from the URL, you can use the useSearchParams, But when you want to get the params you defined in your Route component and path prop, you can use the useParams

edited Feb 21 '23 at 15:08

answered Feb 21 '23 at 14:51

Mohammadreza Khedri

2,523
1
11
22

score 1 · Answer 2 · answered Feb 21 '23 at 14:51

1

use useParams from React Router

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

function ProfilePage() {
  // Get the userId param from the URL.
  let { userId } = useParams();
  // ...
}

answered Feb 21 '23 at 14:51

voq

73
1
9

React: how to access url's parameters

2 Answers2