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.
Link
and this documentation it:Provides declarative, accessible navigation around your application.
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?
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.
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With