Как передать параметры запроса в каждый путь маршрута в реакции?

Question

Я пытаюсь реализовать React Router с такими параметрами запроса, как http://localhost:3000/login?Id=1, Я смог добиться этого только для моего маршрута входа в систему, что также, если бы я указал путь как http://localhost:3000/, который затем перенаправляет,Тем не менее, я хочу реализовать через приложение.Это соответствует nomatch маршруту, если я реализую на других маршрутах.Вот так выглядит мой 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

Есть два способа достичь желаемого. Самый простой способ - на каждой «странице» или корневом компоненте каждого маршрута обрабатывать параметры запроса.

Любому компоненту, который является component компонента Route, будет передана пропа location. Параметры запроса находятся в location.search, и их нужно будет проанализировать. Если вы беспокоитесь только о современных браузерах, вы можете использовать URLSearchParams , или вы можете использовать библиотеку, например query-string , или, конечно, вы можете проанализировать их самостоятельно.

Подробнее об этом можно прочитать в документах о реагирующих маршрутизаторах .

Второй способ сделать это, на самом деле, не так уж отличается, но у вас может быть 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 s, которые у вас есть, должны нормально работать.