React router V6 nie zwraca propsa match

Hej.
Wie ktoś może czy istnieje jakaś droga aby na react router v6 wymusić zwrócenie propsa match ?

Działam sobie aby po kliknięciu w konkretną notatkę router kierował na widok dla notatki i ładował na podstawie path z obiektu propsa match konkretny kolor dla podstrony.

I owszem napisałem sobie logikę aby to obsłużyć aby wiedzieć na jakim typie podstrony jestem ale przypomina mi się że react router we wcześniejszych wersjach zwracał propsa match i z niego bez żadnej zabawy mogłem sobie wyciągnąć path i mieć np. /articles/"id" i sobie później sprawdzić po tym. A teraz kod przez brak tego propsa wygląda tak.

import React from 'react'
import { useMatch  } from 'react-router-dom'

import { routes } from 'routes'
import DetailsTemplate from 'templates/DetailsTemplate.js'

const DetailPage = () => {

  const checkPath = (route) => {
    const check = useMatch(route)
    return check ? (
      check.pattern.path
    ) : (
      false
    )
  }

  return (
    <DetailsTemplate>
      <p>{`This is note ${checkPath(routes.note) === routes.note}`}</p>
      <p>{`This is article ${checkPath(routes.article) === routes.article}`}</p>
      <p>{`This is twitter ${checkPath(routes.twitter) === routes.twitter}`}</p>
    </DetailsTemplate>
  )

}
  

export default DetailPage

Wcześniej można to było zapisać prościej

import React from 'react'

import { routes } from 'routes'
import DetailsTemplate from 'templates/DetailsTemplate.js'

const DetailPage = ({match) => (
    <DetailsTemplate>
      <p>{`This is note ${match.path === routes.note}`}</p>
      <p>{`This is article ${match.path === routes.article}`}</p>
      <p>{`This is twitter ${match.path === routes.twitter}`}</p>
    </DetailsTemplate>
)
  

export default DetailPage

Nie sprecyzowałem dokładnie ale jak mam np. obiekt i w nim
article: '/articles/:id' to zależy mi aby móc wyciągnąć z routera, że aktualnie jestem właśnie na path /articles/:id i wtedy sobie porównuję aha, jestem na tej i tej podstronie niezależnie od id jakie tam jest podane po dwukropku.

bo normalnie jak porównam to co przykładowo zwróci mi useLocation z react router to jest /articles/:35353 a to nie jest równie później przy sprawdzaniu na jakiej podstronie jestem np /articles/:75473 === /articles/:id będzie zawsze false. A Match z automatu zwracał po prostu /note/:id czy /articles/:id niezaleznie jakie id było wpisane w pasku adresu.

Teraz chyba wszystko jest przekazywane w react routerze przez hooki, więc raczej już nie ma propsa match z wcześniejszych wersji.

Możesz sprawdzić hook useRouteMatch i funkcje matchPath, czy któraś robi to co chcesz

https://stackoverflow.com/a/69887731
https://stackoverflow.com/a/61254800

Spróbuję ten zapis

If you need to see if child routes are there, you can use * e.g. let match = useRouteMatch("/blog/:slug/*") which would return match.params['*'] as a string of anything matching. For example /blog/hello/edit would be { slug: 'hello', '*': 'edit' }

Jak ta gwiazdka nie uratuje sprawy to zostawiam jak jest. Pierwszy przykład który podałeś nie działał gdyż zwracał path np. /notes/48583 i musiałbym bawić się regexem aby wyłuskać notes a pozbyć się / i id

Właśnie dlatego podałem 2 linki, bo u siebie nie mogłem sprawdzić jak to dokładnie działa, ponieważ w żadnym projekcie z tego nie korzystam.

Jeśli nic z tego co podałem nie zadziała to zawsze możesz wydzielić tą swoją funkcjonalność do osobnego pliku i stworzyć swój własny hook.

import { useMatch } from 'react-router-dom';

const useCheckPath = (route) => {
  const check = useMatch(route)
  
  return check ? (
    check.pattern.path
  ) : (
    false
  );
}

export default useCheckPatch;

import { useCheckPath } from './hooks/use-check-path';

const AboutUs = () => {
  const path = useCheckPath('/about-us');

  console.dir(path);

  return <>About us</>
};

export default AboutUs;

Problem jaki jest z tymi przykładami jest taki, że do obydwu trzeba podać w parametrze to co mają znaleźć i dopiero to wypluwają jeżeli się zgadza.
Match działał tak, że od razu sam z siebie to podawał. Nie mniej dziękuję za pomoc. I zostawiam kod w takiej formie tylko logikę wydzielę osobno jako hook.

Zrobiłem to jeszcze inaczej z każdego Route dla komponentu przekazuje propsa ze ścieżką. I wszystko śmiga bez zbędnych kombinacji