Wednesday, 5 July 2023

redirect in react had been deprecated for new version solution

Redirect and Navigate Component

The Redirect component was usually used in previous versions of the react-router-dom package to quickly do redirects by simply importing the component from react-router-dom and then making use of the component by providing the to prop, passing the page you desire to redirect to.

import { Redirect } from 'react-router-dom';

<Route path='/redirect-page' element={ <Redirect to="/error-page" /> }/>


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 to redirect to the page you specify.

Following example scripts of solution with Navigate scripts :

import { Navigate } from 'react-router-dom';

<Route path="/redirect" element={ <Navigate to="/error-page" /> } />

another sample :

return(<Navigate to="/dashboard" />)


Source : https://stackabuse.com/redirects-in-react-router/


 

No comments:

Post a Comment