React routing from external link

Question

I'm trying to implement ForgetPassword component. My routing for app:

  const {user} = useSelector(state => state.user)
  return( 
    <Switch>
      <Route exact path={'/app/login'} component={Login} />
      <Route exact path={'/app/forget'} component={ForgetPassword} />
      <Route exact path={'/api/auth/password/reset/:id/:token/'} component={ResetPassword} />
      {user ? (<>
        <Switch>
          <Route exact path={'/app/profile'} component={Profile} />
          <Route exact path={'/app/bar'} component={Bar} />
          {user && (<Redirect exact from='/' to='/app/bar' />)}
        </Switch>
      </>) : <Redirect to='/app/login' />}
    </Switch>
  )

Component ResetPassword uses useParams to get parameters from url, which are needed for reset password process. When you send your email, you'll get reset link for password. Link looks like: https://someaddress.com/api/auth/password/reset/MzY/5ec-61a27a7043e37320bfd1/

I'm using react-router-dom 5.1

Expected behaviour: After clicking reset link app should redirect into ResetPassword component with params.

Current behaviour: After clicking link it redirects into '/app/login'.

I've tried to change paths with no exact. It doesn't work. It works only if I paste part api/auth/password/reset/MzY/5ec-61a27a7043e37320bfd1/ to localhost. On server it redirects into /app/login

How it should be handled with react-router-dom?

score 3 · Accepted Answer · answered Mar 05 '20 at 15:42

The solution is to ask your backend developer if he/she redirects your link into another, after clicking link from api in your mail it redirects into link like app/password/reset?:id={id}&token={token}. (It depends from backend)

To display ResetPassword you need

<Route exact path={'/app/password/reset'} component={ResetPassword} />

and id and token you can get from react-router-dom hook useLocation

const {search} = useLocation()

and using querystring will help to get object with id and token

const parsed = queryString.parse(search.slice(1))
const {id, token} = parsed

Slice will help remove question mark ? from link

I hope it helps somebody. The answer is inspired by this thread

React - How to get parameter value from query string

React routing from external link

1 Answers1