React-Router - Link vs Redirect vs History React-Router - Link vs Redirect vs History reactjs reactjs

React-Router - Link vs Redirect vs History


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