Redirecting doesn't render the component but changes url in address bar

Question

Have searched most of the answers in stack but doesn't seem to find any that matches to my scenario. Please help someone.

I have been using react-router-dom v4 and upgraded to v5 but still getting same issue. But It renders once refresh is clicked.

Code is -----

const RedirectToRoute = ({ context, isPreviousLocation }) => {
    if (isPreviousLocation) {
        return (
            <Switch key={shortId.generate()}>
                <Redirect to={context.previousLocation} />
            </Switch>
        );
    }
    return null;
};
RedirectToRoute.propTypes = {
    context: PropTypes.object,
    isPreviousLocation: PropTypes.bool,
};

RedirectToRoute.defaultProps = {
    context: {},
    isPreviousLocation: {},
};

export default RedirectToRoute;

Used this component in main component as ---

<CorrectionForm props={someProps} >
  <RedirectToRoute context={context} isPreviousLocation={isPrevLocation} />
  <FormUpdateSuccessMessage />
</CorrectionForms >

Tried to change redirect to route like ----

<Switch>
  <Route render={() => <Navigate to={context.prevLocation} />} />
<Switch>

or like this when upgraded to v6 ----

 <Routes>
   <Route render={() => <Navigate to={context.prevLocation} />} />
<Routes />

Nothing seems to work. Please help. Been stuck on this for weeks

What ***specific*** versions and combinations thereof of `react` and `react-router`/`react-router-dom` have you been trying to use? There were issues between all but the latest versions of `react-router` and `react@18`, and your `react-router-dom@6` code is completely incorrect. Does this help answer your question? https://stackoverflow.com/a/71833424/8690857 The symptoms you describe are basically the same. — Drew Reese, Jun 06 '22 at 15:41
Was using react@18 react-dom@18 react-router@4.3 and react-router-dom@6. Looks like I was not using the routes and path correctly and was rendering the Navigate component as a function instead of just passing as component to element. The redirections are fixed yet there seems complications in the project after admin is logged in. When clicking any link after logging gives "Uncaught Invariant Violation: Minified React error #188" this error. Any idea on how to resolve this? Much appreciated. — Vikash Sharma, Jun 07 '22 at 14:25

score 0 · Answer 1 · answered Jun 06 '22 at 05:49

In React Router v6 you do not have render prop for Route component instead of render use element prop and your Route there is no path prop so what are you expecting from which place it would redirect?

I would recommend you to checkout this example for React Router v6

score 0 · Answer 2 · answered Jun 07 '22 at 14:22

Yeah fixed the routings by using :-

<Routes>
<Route path="/" element={<Navigate to="/admin" />} />
<Routes />

Was actually rendering the component as a function instead of passing the component to element and didn't define the current path. Thanks for help. Really appreciate.

Redirecting doesn't render the component but changes url in address bar

2 Answers2