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/

我正在使用react-router-dom 5.1

预期行为：单击重置链接后，应用程序应使用参数重定向到ResetPassword组件。

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

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

应如何使用react-router-dom处理它？</ p>

Answer 1

解决方案是询问您的后端开发人员是否将您的链接重定向到另一个，单击邮件中api的链接后，它会重定向到诸如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

切片会帮助删除问号吗？来自链接

我希望它能对某人有所帮助。答案受此线程启发

React - How to get parameter value from query string

从外部链接反应路由

1 个答案: