来自外部的 React 路由 link

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 获取参数，这些参数是重置密码过程所需的。当您发送电子邮件时，您将重置 link 密码。 Link 看起来像： https://someaddress.com/api/auth/password/reset/MzY/5ec-61a27a7043e37320bfd1/

我正在使用 react-router-dom 5.1

预期行为：单击重置后 link 应用应重定向到带有参数的 ResetPassword 组件。

当前行为：单击 link 后，它会重定向到“/app/login”。

我试过不准确地更改路径。它不起作用。仅当我将 api/auth/password/reset/MzY/5ec-61a27a7043e37320bfd1/ 部分粘贴到本地主机时它才有效。在服务器上它重定向到 /app/login

react-router-dom应该如何处理？

Answer 1

解决方案是询问您的后端开发人员，如果 he/she 将您的 link 重定向到另一个，在您的邮件中单击 api 中的 link 后，它会重定向到 link 喜欢 app/password/reset?:id={id}&token={token}。（这取决于后端）

要显示 ResetPassword，您需要

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

以及您可以从 react-router-dom 挂钩 useLocation

获得的 ID 和令牌

const {search} = useLocation()

并使用 querystring 将有助于获取具有 ID 和令牌的对象

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

切片有助于去除问号？来自 link

希望对大家有所帮助。答案的灵感来自这个线程

来自外部的 React 路由 link

React routing from external link

reactjs

routing

react-router-dom