CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
Gage Hendy Ya Boy
Gage Hendy Ya Boy

Reputation: 1564

<Link> Replace not working

I'm working on a full site in React. I'm using the <HashRouter> to render my app. Throughout the site you will see a navigation menu that uses <Link>s to take you to different pages.

One of the pages in my site is a shop, the URL for which is /Shop.

When you click on a product in the shop it uses <Link> to append the product name to the end of the current URL - /Shop/Product - and renders the corresponding information.

If you are looking at a product and you try to navigate to a different page it only replaces the last entry, even with replace={true}. So if I'm currently at /Shop/Product and I try to navigate to /Contact, the URL changes to /Shop/Contact.

Am I misunderstanding how replace is supposed to work? Or am I doing something incorrectly? Any help would be very appreciated.

Upvotes: 5

Views: 2288

Answers (1)

Austin Greco
Austin Greco

Reputation: 33554

If you use something like this:

<Link to="Contact" />

It will only change the last piece of the URL because it's a relative path, so if you were at /Shop/Something it would change to /Shop/Contact

You probably want to use the absolute path instead:

<Link to="/Contact" />

--

The replace vs push route is a different thing. If you think of your route history as an array:

[
  '/Shop/Item',
  '/Shop/Item2'
]

push will append to the list, and replace will replace the last index

Upvotes: 7

Related Questions