dots in URL parameters and React router

Question

I have a path="users/:userNickname", which works fine for anything like users/.mary users/mary.kim, but if the path is users/., it will redirect to 404 page even without sending request to the server. I feel like I'm missing something fundamental. Hope for directions.

Answer 1

In React-Router "." and ".." are kind of "special" characters that are not literally interpreted when used as a link target path.

See Link for details.

A relative <Link to> value (that does not begin with /) resolves relative to the parent route, which means that it builds upon the URL path that was matched by the route that rendered that <Link>. It may contain .. to link to routes further up the hierarchy. In these cases, .. works exactly like the command-line cd function; each .. removes one segment of the parent path.

An earlier version of the docs mention both "." and "..". These are often used when building relative paths where you want to navigate to a target path relative to the currently matched route.

Imagine the following routing structure:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="foo" element={<Foo />}>
    <Route path=":id" element={<FooItem />} />
  </Route>
  <Route path="bar" element={<Bar />}>
    <Route path=":id" element={<BarItem />} />
  </Route>
</Routes>

And the current URL path is: "/foo/123"

Action	Target Path
Navigate to sibling Foo item route from Foo	to="./456", which is same as just to="456"
Navigate to sibling Foo item route from FooItem	to="../456"
Navigate to parent sibling Bar item route from Foo	to="../bar/123"
Navigate to parent sibling Bar item route from FooItem	to="../../bar/123"

This is all to say that when you are attempting to navigate to "users/." this is exactly the same as targeting "users/" and if you are not rendering any route for path="/user" specifically then your 404 "catch-all" route is matched, of if you've not even that you'll likely see the "no routes matched ..." error.