从外部链接反应路由答案

【问题标题】：React routing from external link从外部链接反应路由
【发布时间】：2020-06-11 22:26:30
【问题描述】：

我正在尝试实现 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 应该如何处理？

【问题讨论】：

标签： reactjs routing react-router-dom

【解决方案1】：

解决方案是询问您的后端开发人员他/她是否将您的链接重定向到另一个，在单击邮件中来自 api 的链接后，它会重定向到 app/password/reset?:id={id}&token={token 之类的链接}。（这取决于后端）

要显示您需要的 ResetPassword

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

还有你可以从react-router-dom钩子useLocation获得的id和token

const {search} = useLocation()

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

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

Slice 将帮助删除问号？来自链接

我希望它可以帮助某人。答案是受这个帖子启发的

React - How to get parameter value from query string

【讨论】：