React Router with Meteor：如何在不重新加载的情况下从 OAuth 重定向后从 URL 中删除代码参数

Question

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

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

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

Answer 1

您需要从 React 路由器绑定历史记录。然后你需要从当前路径名中提取参数 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)

React Router with Meteor：如何在不重新加载的情况下从 OAuth 重定向后从 URL 中删除代码参数

React Router with Meteor: How to remove code param from URL after redirect from OAuth without reload

javascript

meteor

reactjs

react-router