Реагировать на маршрутизацию по внешней ссылке

Question

Я пытаюсь реализовать компонент ForgetPassword. Мой маршрут для приложения:

  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>
  )

Компонент ResetPassword использует useParams для получения параметров из URL, которые необходимы для процесса сброса пароля. При отправке электронной почты вы получите ссылку для сброса пароля. Ссылка выглядит так: https://someaddress.com/api/auth/password/reset/MzY/5ec-61a27a7043e37320bfd1/

Я использую response-router-dom 5.1

Ожидаемое поведение: после нажатия кнопки сброса ссылка приложение должно перенаправить в компонент ResetPassword с параметрами .

Текущее поведение: после нажатия на ссылку он перенаправляется в «/ app / login».

Я пытался изменить пути без точных. Не работает Это работает, только если я вставляю часть api / auth / password / reset / MzY / 5e c -61a27a7043e37320bfd1 / в localhost. На сервере он перенаправляется в / app / login

Как это должно быть обработано с response-router-dom?

Answer 1

Решение состоит в том, чтобы спросить вашего бэкэнд-разработчика, перенаправляет ли он вашу ссылку на другую, после нажатия на ссылку из api в вашем письме она перенаправляет на ссылку типа app / password / reset?: Id = {id} & token = {token }. (Зависит от серверной части)

Для отображения ResetPassword вам нужно

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

, а также идентификатор и токен, которые вы можете получить из react-router-dom ловушка useLocation

const {search} = useLocation()

и использование querystring поможет получить объект с идентификатором и токеном

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

Срез поможет снять знак вопроса? по ссылке

Надеюсь, это кому-нибудь поможет. Ответ вдохновлен этой веткой

React - Как получить значение параметра из строки запроса