Cześć, to moje początki z React Router więc przepraszam, jeżeli pytam o coś oczywistego, raczej coś przeoczyłem.
Otóż mam router, na przykład taki:
<Routes>
<Route path="/" element={<h1>Main Page</h1>} /
<Route path="/books" element={<h1>Books</h1>} />
<Route path="*" element={<NotFound />} />
</Routes>
oraz komponent w który w jakiś sposób generuje się ciag znaków, który ma być jednocześnie nową ścieżką do jakiegoś komponentu albo składnikiem takiej ścieżki, i gdzie generowana jest akcja przejścia do tej ścieżki.
Jedno działające rozwiązanie to
w komponencie:
onClick={e => {
e.stopPropagation();
history("ścieżka");// albo navigate("ścieżka");
}}
a w routerze
<Routes>
<Route path="/" element={<h1>Main Page</h1>} /
<Route path="/books" element={<h1>Books</h1>} />
<Route path= {location.pathname} element={<h1>Books</h1>} />
<Route path="*" element={<NotFound />} />
</Routes>
ale ono mi się nie bardzo podoba bo location.pathname
"łapie wszystko" tzn po przekierowaniu mogę modyfikować do woli faktyczny link i wszystko działa a chcę żeby przechodziło do not found.
Drugie bardziej złożone
w komponencie
onClick={() => {
navigate("/ścieżka", { state: { newLink: "ścieżka" } });
}}
i w routerze
const location = useLocation();
<Routes>
<Route path="/" element={<h1>Main Page</h1>} /
<Route path="/books" element={<h1>Books</h1>} />
<Route path={`/${location?.state?.newLink}`} element={<h1>Tu jest newLink</h1>} />
<Route path="*" element={<NotFound />} />
</Routes>
Działa jak powinno, ale czy nie ma czegoś prostszego ??? W sumie nie znalazłem sposobu na modyfikację zawartości useParams()
(prawdopodobnie go nie ma)