Question 368322 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – dots in URL parameters and React router

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.

Tags:

2

Answers


  1. 0

    For dynamic routes the React Router Dom library will be expecting more than a literal character.

    React Router Dom can have a specific path such as

      <Route path="/user/." component={UserDot} />
    {/* Define more routes as needed */}
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search