CODEWITHSUNDEEP
javascripthtmlreactjs
Ae Ri
Ae Ri

Reputation: 242

What is the Simple way to use URL params in react-router V6

I am learning to react and the tutorial was way too old so I switched to documentation and articles. But I found it very confusing. (Eg: Switch was removed in V6 But still there in V6 docs).

How to use URL params to render a param to an element? like a heading?

Upvotes: 0

Views: 615

Answers (3)

Ae Ri
Ae Ri

Reputation: 242

Adding to Michal Šajdík ans

export function Some() {
    let { name } = useParams(); 
    return (
        <div>
        <p>All details about {name}</p>
        </div>
    )
}

and in your App.js

function App() {
  return (
    <Router>
          <Routes>
            <Route path="link/:name" element={<Some/>} />
          </Routes>
    </Router>
  );
}

Upvotes: 0

Billions.A.Joel
Billions.A.Joel

Reputation: 235

  1. Make sure you install react router dom

    npm install react-router-dom

  2. import react router

    import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

  3. Wrap your components in the Router and Routes imports. This is a must for v6.

        <Router>
    <Routes>
        <Route
            exact
            path="/any-name"
            element={(<componentNameToShow />)}
        />                                           
    </Routes>                                        
    </Router>

Upvotes: 0

Michal Šajd&#237;k
Michal Šajd&#237;k

Reputation: 54

you can use this let {id} = useParams(); for a route with a following path path="/manage-business/:id"

Upvotes: 1

Related Questions