Search code examples
javascriptreactjsreact-router-dom

Difference in the navigation (React Router v6)


Is there a difference in having "/" before the name of the path? Should I get different results if in one case I am using "/" while navigating from page 1 to page 2:

navigate({
  pathname: 'page2',
  search: `?${createSearchParams({ email: username })}`,
});

And in the other:

navigate({
  pathname: '/page2',
  search: `?${createSearchParams({ email: username })}`,
});

What will be the new pathname in both cases?


Solution

  • The difference is between relative and absolute navigation. "/page2" with a leading slash "/" is an absolute path where "page2" is a relative path. If there was a nested route from the current location "page2" would navigate relative to the current location.

    If you are navigating from "page1" to "page2" these should like they are at the same "relative" level, so you'd probably want to use absolute linking "/page2" or a relative path to a sibling path "../page2".

    Relative Routes and Links