如何在 react 中的每个路由路径中传递查询参数？

Question

我正在尝试使用http://localhost:3000/login?Id=1这样的查询参数来实现React路由器，我只能在我的登录路由中实现它，如果我将路径作为http://localhost:3000/然后重定向，但是，我想在整个应用程序中实现。如果我在其他路由上实现，它会匹配namatch路由。这就是我的index.js的样子，有人能指导我如何实现包括查询参数在内的所有路由路径吗？

ReactDOM.render(
      <BrowserRouter>
        <Switch>
          <Route
            exact
            path={`/`}
            render={() => {
              if (!store.getState().login.isAvailable) {
                return <Redirect to={`/login?Id=${Id}`} />
              } else {
                return <Dashboard />
              }
            }}
          />
          <Route exact path={`/login`} component={Login} />
          <Route exact path={`/signup`} component={SignUp} />
          {Routes.map((prop, key) => (
            <Route path={prop.path} key={key} component={prop.component} />
          ))}
          <Route component={NoMatch} />
        </Switch>
      </BrowserRouter>,
  document.getElementById('root')
)

Answer 1

有两种方法可以完成你想要的。最基本的方法是在每个“页面”或每个路由的根组件上，处理查询参数的解析。

作为< code>Route组件的< code>component的任何组件都将被传递适当的< code >位置。查询参数位于< code>location.search中，需要对其进行解析。如果你只是担心现代的浏览器，你可以使用URLSearchParams，或者你可以使用像query-string这样的库，当然，你也可以自己解析它们。

您可以在react router文档中阅读更多信息。

第二种方法其实并没有什么不同，但你可以使用一个HOC来包装你的每个“页面”，处理查询参数的解析，并将它们作为列表或其他东西传递给有问题的“页面”组件。

以下是使用URLSearchParams的基本方法的示例：

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

// this is your "page" component, we are using the location prop
function ParamsPage({ location }) {
  // you can use whatever you want to parse the params
  let params = new URLSearchParams(location.search);

  return (
    <div>
      <div>{params.get("name")}</div>
      // this link goes to this same page, but passes a query param
      <a href="/?name=MyName">Link that has params</a>
    </div>
  );
}

// this would be equivalent to your index.js page
function ParamsExample() {
  return (
    <Router>
      <Route component={ParamsPage} />
    </Router>
  );
}

export default ParamsExample;

编辑：为了澄清，你不需要在你的index.js页面上做任何事情来完成这项工作，你拥有的简单的Route应该可以正常工作。