3 ways of redirections in react-router
We use “react-router” which is a general underlying routing package. And with it, we use react-router-dom which manages routing on web applications together with react-router package.
react-router-dom essentially is a layer on top of browser’s history api and tracks of url changes in the browser and maps to a router where it’s defined in single place on our web apps — generally named as router or routes.js.
Rest of the app, both programmatically (javascript) or the html links uses to root path addresses to request navigation in the router. Rest is handled by react-router.
3 Types of Navigation Requests in React JS Web Applications
1) Links — Replacements of <a> tags in reactjs web apps
We use a special “Link” component from react-router-dom library that wraps simple links with javascript event handlers and maps directly to react-router where it’s handles as url change without page refresh.
To use Link component, first import it from react-router-dom package:
import { Link } from 'react-router-dom'and to use the component:
<Link to="/">...text, button or other elements....</Link>Keep in mind that <a> tags are still functional but may have complications on react-router-dom package to capture if the link is internal or external so it’s captured properly by react-router-dom.
2) Redirections as Component in “render” methods
This method is not a good practice in my opinion but it’s a quick solution and in some cases where of your page component is directly resulting a redirection all together which will need to be unmounted/destructed and application has to navigate to another page component — like unauthorized access, login page, error page redirection…
Simply import and use “Redirect” component from react-router-dom package. Here is a scenario in your component render method that your page is resulting unauthorized access:
if (!authorized) {
return <Redirect to="/login" />
}3) Programmatical redirect from javascript
This is probably the most common scenario where a redirect needed when certain user interaction synchronously or asynchronously results the redirect — like clicking a button that calls the API and results the redirect when it successfully resolves.
This case is unfortunately not very straightforward. In order to access history api, you need to configure it as a prop to all components from router. For this there has to be a shared history instance of the browser. So at the highest level when we define our router using react-router and react-router-dom package wrappers, we need to create and pass the history instance that will enable “history” prop in the components so we can push new change or request navigation to previous steps (going back). We will use the “history” package to create browser history instance.
For the first time set up, after installing history package from npm, in your app container, import “createBrowserHistory” method from history package, then call it to create an instance of browser history.
import { createBrowserHistory } from 'history'
const history = createBrowserHistory()Then, where you define redux Provider, before your root “router” definition, wrap your root router component with BrowserRouter (which you may already have for the react-router-dom package), pass the history instance to your BrowserRouter component as a prop:
<Provider store={store}>
<BrowserRouter history={history}>
<Route path="/:filter?" component={App} />
</BrowserRouter>
</Provider>You’re ready to start manipulating browser history from your components.
In your components, whenever you need to programmatically redirect, deconstruct (or directly use) “history” object from props of the component. Then, to redirect to a new address:
const { history } = this.props
history.push('/dashboard')This will initiate react-router-dom to listen the history instance and resolve the route and re-render the whole app container with the component assigned to the route requested.
This article is first published on my blog: https://mfyz.com/3-ways-of-redirections-in-react-router/
