javascript - react 路由器与 meteor : How to remove code param from URL after redirect from OAuth without reload

Question

我是。在 Meteor 应用程序上使用 React Router 和 React。我使用 OAuth，在 OAuth 调用另一个站点后，该站点使用代码重定向到我的 URL。例如http://localhost:3000/?code=lsK1o0FI8AV0WEVfxhEXiyjZL32we2&state=None

然后我阅读代码并在我的应用程序中使用它。获取代码后，虽然我想从 URL 中删除代码以对用户隐藏它。

如何在不重新加载的情况下使用 React Router 或 Javascript 做到这一点？

Answer 1

您需要从 React 路由器绑定(bind)历史记录。然后您需要从当前路径名中提取参数 code。如果代码存在，您可以使用该代码并替换您需要的 url(例如 /)。这是可能的实现:

import {withRouter} from 'react-router-dom'

const App = ({
  history,
}) => {
  const code = new URLSearchParams(
    new URL(history.pathname).search
  ).get('code')
  if(code) {
    useCode(code)
    history.replace('/')
  }
  return (
    <div>...</div>
  )
}

export default withRouter(App)