CODEWITHSUNDEEP
javascriptreactjsreact-router-dom
Elena Alexeenko
Elena Alexeenko

Reputation: 120

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?

Upvotes: 3

Views: 6589

Answers (1)

Drew Reese
Drew Reese

Reputation: 202761

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

Upvotes: 11

Related Questions