Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React-Router - Link vs Redirect vs History

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?

like image 274
Phillip Avatar asked Jun 30 '18 16:06

Phillip


People also ask

Should I use history push or redirect?

Use the history. push and history. replace in a component (usually wrapped with the withRouter HOC, so that you can have access to the location object without having to pass it from parent to child. Use the <Redirect> component with or without the push property, depending.

What can I use instead of redirect in react?

With the release of React Router v6, the Redirect component was removed and replaced with the Navigate component, which operates just as the Redirect component does by taking in the to prop to enable you redirect to the page you specify.

What is the difference between Link and NavLink?

The NavLink is used when you want to highlight a link as active. So, on every routing to a page, the link is highlighted according to the activeClassName . Link is for links that need no highlighting. And a is for external links.


1 Answers

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

like image 193
Mike Abeln Avatar answered Oct 15 '22 09:10

Mike Abeln