Javascript 将参数保存到本地存储并重定向

我正在制作一个web应用程序。当后端处理数据并重定向到URL为的客户端时：

http://localhost:3000/signinsuccess?username=sample&token=1234567890#

我需要将此URL路由到名为

mainPage

的组件，获取所有参数，然后保存到LocalStorage。我现在该怎么办

在客户端中，我在myApp之外创建了一条路由，如下所示：

  <Router history={history}>
    <Switch>
      <Route
        component={mainPage}
        path="/signinsuccess"
      />
    </Switch>
  </Router>

---

要实现这一目标，需要做一些工作：

在componentDidMount中，您需要解析url参数以检索参数值。您可以使用这个小库来解析url：

将url参数保存到本地存储

代码可以如下所示：

在主页组件中：

如果您的组件是类组件

componentDidMount(){

  const queryParams  = qs.parse(location.search, { ignoreQueryPrefix: true })
  //then save expected query param to local storage
  storage.setItem("token", queryPrams.token);
}

如果主页组件是功能组件，则可以使用挂钩

//useLocation is a hook can be imported from react-router
const location = useLocation();
React.useEffect(()=>{
  const queryParams = qs.parse(location.search, { ignoreQueryPrefix: true })
  storage.setItem("token", queryPrams.token);

},[])

---

在

mainPage

component

componentDidMount

主页在哪里？尝试发布更多代码。这还不足以理解问题的整个范围。：）在

主页

组件中，继续使用该

本地存储

.Tks。我正在使用React钩子，这段代码对我有用：useffect（（）=>{var qs=require（'qs'）；const queryParams=qs.parse（location.href.split（“？”）[1]，{ignoreQueryPrefix:true}）；localStorage.setItem（“authorize_token”，authorization）；…}）；Tks。它仍然有用。但在我的例子中，location.search不会返回错误的数据。对于ex:location.href:location.search为空，我必须从href拆分，然后传递到qs.parse