0

I am a newbie to react have implemented a redirect logic depending on what response I am getting back from an API. Now based on the API response I am seeing that the URL is changing on the browser but nothing is getting displayed. When I refresh the link in the browser tab then the page is getting loaded.Looked at similar issues in stackoverflow but nothing seems to work in my situation. Any help/ guidance in this regard will be helpful. Thanks in advance

import ReactDOM from 'react-dom';
import {
  Route,
  Switch,
  HashRouter,
  withRouter,
  Redirect
} from 'react-router-dom';

<HashRouter>
  <Switch>  
    <Route exact path="/" component={withRouter (RoutePage)}>
      {UserStatus === 'Migrated' && audience === 'admin'
        ? <Redirect to="/adminConfirmation" />
        : null
      }
      {UserStatus === 'Repeated' && audience === 'admin'
        ? <Redirect to="/admin-hub" />
        : null
      }
      {UserStatus === 'Migrated' && audience === 'user'
        ? <Redirect to="/userConfirmation" />
        : null
      }
      {UserStatus === 'Repeated' && audience === 'user'
        ? <Redirect to="/user-hub" />
        : null
      }
    </Route>
    <Route exact path="/admin-hub" component={withRouter (Admin)} />
    <Route exact path="/user-hub" component={withRouter (UserHub)} />
    <Route
      exact 
      path="/adminConfirmation"
      component={withRouter(AdminConfirmation)} 
    />
    <Route
      exact 
      path="/userConfirmation" 
      component={withRouter(UserConfirmation)}
    />
  </Switch>
</HashRouter>
Drew Reese
  • 165,259
  • 14
  • 153
  • 181
Prashanth Kumar
  • 3
  • 2
  • Can you clarify what the redirect logic is that you refer to? Is it the four children of the `"/"` route? What are `UserStatus` and `audience`, where are they declared? Can you edit your post to include a more complete [mcve]? What *specific* versions of `react` and `react-router` are installed? You can check by running `npm list react react-router react-router-dom` from the project's directory in a terminal. – Drew Reese Aug 15 '22 at 15:25
  • react-router-dom@5.2.0 │ ├─┬ react-router@5.2.0 – Prashanth Kumar Aug 15 '22 at 17:01
  • And what specific version of React? If using `react@18` does this answer your question? https://stackoverflow.com/a/71833424/8690857 – Drew Reese Aug 15 '22 at 17:03
  • UserStatus and Audience are the fields I need to looks at and do conditional routing. These values are populated by API calls and these are working as expected. All the 4 pages are children of "/" route. When I test it out I see the URL changing in the browser which tells me that the redirect is working, but the nothing is displayed in the browser. When I refresh the changed URL in browser that's when the page is rendered. The output from console is listed below react-router-dom@5.2.0 │ ├─┬ react-router@5.2.0 – Prashanth Kumar Aug 15 '22 at 17:09
  • Ok, that is the `react-router-dom` version. What version of ***`react`*** is installed? Depending on the `react` version there might be an issue – Drew Reese Aug 15 '22 at 17:15
  • I was using react@18 but I downgraded it to react@16.14.0 based on the link from above. Still facing the same issue. – Prashanth Kumar Aug 15 '22 at 20:28
  • If you are on React18 then you'd certainly need RRDv5.3.3 or better. Might be stale state enclosures then. We need a more complete [mcve] in your post here. Can you *also* create a *running* [codesandbox](https://codesandbox.io/) demo of your code that reproduces this issue that we could inspect and debug live? – Drew Reese Aug 15 '22 at 20:35

0 Answers0