I'm trying to have a router that looks like this home/{id}/{question}. And so far I was able to set one dynamic id by doing so:
export default function Navigation() {
return (
<Routes>
<Route path="" element={<LoginScreen />} />
<Route path="/home-screen/:id" element={<Home />}>
</Route>
<Route path="/hom" />
{/* <Route path='./home-screen/leaderboard' element= */}
</Routes>
);
}
And use it this way to make redirection:
nav("home-screen/" + currentSelectUser?.id, {
state: {
user: currentSelectUser,
},
});
But how about if I want to add the id of the question as well, to have something that looks like this: home/{id}/{question}.
You can set it up this way:
<Route path="home/:firstId/:secondId" element={<Home />} />
You can make a redirection to that url like so:
nav("home/" + currentSelectUser?.id + "/" + currentSelectUser?.id, {
state: {
user: currentSelectUser,
},
});
And finally you could get them in Home with the help of useParams:
import { useParams } from "react-router-dom";
function Home() {
let { firstId, secondId } = useParams();
console.log(firstId, secondId);
return <div className="page">Hello</div>;
}