Dynamiczna ścieżka

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)

Czyli chcesz mieć coś jakby dynamiczną ścieżkę?

Przeczytaj https://v5.reactrouter.com/web/guides/philosophy "Dynamic routing"

Krajeski napisał(a):

w komponencie:

Kopiuj

onClick={e => {
  e.stopPropagation();
  history("ścieżka");// albo navigate("ścieżka");
}}

a w routerze

Kopiuj

<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>

To jest bardzo słabe rozwiązanie, nie mieszaj Router i location, zrobisz sobie tylko kłopoty.

Krajeski napisał(a):

Przeczytałem, nie jestem mądrzejszy. Poważnie, jest jakiś trop prowadzący do match.url ale mocno niejasny. Poa tym, ja na dzień dobry nie mam NIGDZIE zdefiniowanej tej nowej ścieżki, a nawet listy możliwych nowych ścieżek. Krótko mówiąc, brakuje miejsca gdzie tę ścieżkę wprowadzić. Stąd rozwiązanie ze state, pytanie czy nie można prościej+

Zacznij od opisania efektu jaki dokładnie chcesz osiągnąć.

Riddle napisał(a):

Krajeski napisał(a):

Przeczytałem, nie jestem mądrzejszy. Poważnie, jest jakiś trop prowadzący do match.url ale mocno niejasny. Poa tym, ja na dzień dobry nie mam NIGDZIE zdefiniowanej tej nowej ścieżki, a nawet listy możliwych nowych ścieżek. Krótko mówiąc, brakuje miejsca gdzie tę ścieżkę wprowadzić. Stąd rozwiązanie ze state, pytanie czy nie można prościej+

Zacznij od opisania efektu jaki dokładnie chcesz osiągnąć.

Jasne. W komponencie X, który jest na jakiejś tam dowolnej ścieżce Xpath jest funkcja, która generuje ciąg znaków ystring. Po wywołaniu w komponencie X akcji typu onClick, uzytkownik jest przenoszony na stronę o adresie Ypath, gdzie Ypath jest generowane na podstawie ystring. Na ścieżce Ypath jest komponent Z (zawsze, ten sam, niezależnie od X, Xpath, ystring, Ypath). Niezależnie od tego w routerze jest ścieżka "*" do komponentu Error i tam trafia się po wpisaniu w pasek nieistniejącego adresu. Wersja rozwiązania ze state spełnia te wymagania, ale mi samemu niespecjalnie się podoba, zastanawiam się właściwie nad tym czy nie ma czegoś prostszego (ale odrzucam zastosowanie np. Reduxa do przechowania adresu ścieżki), szukam czegoś mieszczącego się w React-Routerze, a ponieważ dopiero co zacząlem z nim przygodę, proawdopodbnie coś ewidentnego ominąłem.

Krajeski napisał(a):

Jasne. W komponencie X, który jest na jakiejś tam dowolnej ścieżce Xpath jest funkcja, która generuje ciąg znaków ystring. Po wywołaniu w komponencie X akcji typu onClick, uzytkownik jest przenoszony na stronę o adresie Ypath, gdzie Ypath jest generowane na podstawie ystring. Na ścieżce Ypath jest komponent Z (zawsze, ten sam, niezależnie od X, Xpath, ystring, Ypath). Niezależnie od tego w routerze jest ścieżka "*" do komponentu Error i tam trafia się po wpisaniu w pasek nieistniejącego adresu. Wersja rozwiązania ze state spełnia te wymagania, ale mi samemu niespecjalnie się podoba, zastanawiam się właściwie nad tym czy nie ma czegoś prostszego (ale odrzucam zastosowanie np. Reduxa do przechowania adresu ścieżki), szukam czegoś mieszczącego się w React-Routerze, a ponieważ dopiero co zacząlem z nim przygodę, proawdopodbnie coś ewidentnego ominąłem.

Ja bym to trzymał w contexcie.

https://reactjs.org/docs/context.html

A dlaczego by nie wykorzystać state od routera?