React-Router - Link vs Redirect vs History

82
votes

There seems to be some confusion with what to use over the other:

  • <Link to='/some/path'>
  • <Redirect to='/some/path'/>
  • history.push('/some/path')

I have been using React/Router for a little while now, and different posts/answers say different things regarding when to use these, and sometimes they don't line up with what someone else said. So I think I need some clarification on this.

From what I understand about Link and this documentation it:

Provides declarative, accessible navigation around your application.

From what I understand about Redirect and this documentation it:

Will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects (HTTP 3xx) do.

It seems like all the posts I have read almost everyone uses Redirect to navigate around there application, and no one ever recommends using Link like in this post.

Now history can do the same thing as Link and Redirect except I have a history stack trace.

Question 1: When would I want to use Link vs Redirect, what's the use case over the other?

Question 2: Since history can route a user to another location in-app with the added bonus of the history stack, should I always just use the history object when routing?

Question 3: If I want to route outside of the app, what's the best method to do so? Anchor tag, Window.location.href, Redirect, Link, none of the above?

1
reactjsreact-routerreact-router-v4react-router-dom
1. Link makes you navigate around your app when clicking on them. When Redirect is rendered, it will push an entry on the history stack automatically. 2. E.g. clicking a Link also pushes an entry to the history stack, so if you can use Link for your purposes, it is usually easier than manipulating the history yourself. 3. A regular <a> tag works great. – Tholle

1 Answers

57
votes

First off, I would really recommend reading through this site:
https://reacttraining.com/react-router/web/api/BrowserRouter

React Router's BrowserRouter maintains the history stack for you, which means that you rarely need to modify it manually.

But to answer your questions:
Answer 1: You'll want to use Link or NavLink in almost all use cases. Redirect comes in handy in specific situations though, an example is when a 404 page is rendered when the user tries to access an undefined route. The Redirect will redirect the user from the 404 route to a new route of your choosing, and then replace the last entry in the history stack with the redirected route.

This means that the user will not be able to hit their browser's back button, and return to the 404 route.

Link NavLink and Redirect all use the router's history api under the hood, using these components instead of history manually means that you are safe to any changes to the history api in the future. Using these components future-proofs your code.

Answer 2: BrowserRouter Maintains the history stack for you, generally my opinion is that you want to stay away from manually updating it where you can.

Answer 3: Here are a few examples for external react links:

<Route path='/external' component={() => window.location = 'https://external.com/path'}/>

<a href='https://external.com/path' target='_blank' rel='noopener noreferrer'>Regular Anchor tags work great</a>

target='_blank' will open the link in a new tab, but please make sure to include rel='noopener noreferrer' to prevent against vulnerabilities