0

I am using react-router where I have following code

       <Router basename={config.historyBasename}>
          <Routes>
            <Route path={routes.landingPage} element={<LandingPage />} />
            <Route
              path={routes.activateAccount}
              element={
                !document.referrer.length ? (
                  redirectTo(appUrls.home)
                ) : (
                  <Parent/>
                )
              }
            />
           
          </Routes>
        </Router>

Here, I am using redirectTo which I created custom method. Now here, I am trying to create a custom route which will do

              <Route
              path={routes.activateAccount}
              element={
                !document.referrer.length ? (
                  redirectTo(appUrls.home)
                ) : (
                  <Parent/>
                )
              }
            />

this. How can I create a custom route which will handle this ?

ganesh kaspate
  • 1
  • 9
  • 41
  • 88

2 Answers2

0

The past couple of years, react-router-dom and react-router introduced the <Redirect /> component which essentially when rendered, redirects the user to a specified location.

For example:

<Route exact path="/">
    <Redirect to={"/home"} />
</Route>

redirect the user to /home whenever he arrives on /.

When using react-router-dom@^6.0.0, refrain from using Redirect and use Navigate instead:

<Route 
    path="/"
    element={<Navigate to={"/home"} replace />}
/>

Which essentially serves the same purpose as the code I wrote above.

no_modules
  • 117
  • 7
  • How do we adda custom route for this ? – ganesh kaspate Nov 18 '22 at 11:18
  • Where do you keep the custom route? Is it a variable? If so, just replace "home" with the variable name as the to argument accepts any string regardless of if its literal or variable declaration. You can also do ternary operation inside of the to={} for example `to={true ? "/home" : some_string}` Same goes for `path` property - it also accepts any string. I should mention, only URL safe strings are accepted in `path` and `to`. – no_modules Nov 18 '22 at 11:22
  • OP is using `react-router-dom@6` and the `Redirect` component is `react-router-dom@5` export, so this doesn't answer the question. – Drew Reese Nov 18 '22 at 16:50
  • I added v6 code, should work this way. – no_modules Nov 21 '22 at 08:00
0

Well you can use Redirect from react-router-dom for Conditionally Redirect to the Default Path

<Route
    path={routes.activateAccount}
    element={!document.referrer.length ? <Redirect to='/home' /> : <Redirect to='/second-route' />}
/>

For v6 you can use Navigate

<Route
    path={routes.activateAccount}
    element={
        !document.referrer.length ? (
        <Navigate replace to='/home' />
        ) : (
           <Navigate replace to='/second-route' />
        )
        }
    />

Please note however that this won't work when server rendering because the navigation happens in a React.useEffect().

Have a look at Redirects in React Router v6 for some deeper details.

Vinit Poojary
  • 178
  • 1
  • 19