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?
you can use this let {id} = useParams(); for a route with a following path path="/manage-business/:id"
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>
);
}
Make sure you install react router dom
npm install react-router-dom
import react router
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
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>