No match for the location, using useParams, even though defined with react-router-dom's Route

Question

I have a React App and the problem comes when I try to use useParams with a location. For the following Route worked perfectly, being able to access the category in the CategoryVerses component:

<Route path="/versete/:category" element={<CategoryVerses />} />

But for the next Route, returns me a warning saying that there are "No matches for the location ..."

<Route path="/verset/:abrev.:chapter.:verse" element={<Verse />} />

I also tried this way, from here:

<Route path="/verset" element={<Verse />}>
  <Route path="?:abrev.:chapter.:verse" element={<Verse />} />
</Route>

Answer 1

The parameters needs to be slash separated, not by dots. Try like this:

<Route path="/verset/:abrev/:chapter/:verse" element={<Verse />} />

Edit: If you need to create and access a route by dots, you can combine all the params into one variable:

<Route path="/verset/:allCombined" element={<Verse />} />

and then access them like this:

const { allCombined } = useParams();

const abrev = allCombined.split('.')[0];
const chapter = allCombined.split('.')[1];
const verse = allCombined.split('.')[2];

//OR directly destruct from array returned by split
const [abrev, chapter, verse] = allCombined.split('.');