Загрузка параметров Url с использованием реакции-маршрутизатора

Question

Я пытаюсь передать некоторые параметры URL-адреса с помощьюact-router, но я не получаю доступ к параметрам, которые я передаю, и страница не получает.

Вот где я отрисовываю роутер:

import {
  BrowserRouter as Router,
  Route,
  Switch,
  HashRouter,
} from "react-router-dom";

window.React = React;

render(
  <Router>
    <Switch>
      <HashRouter>
        <Route exact path="/" component={App} />
        <Route exact path path="/list-days" component={App} />
        <Route
          path="list-days/:filter"
          render={props => <App globalstore={globalstore} {...props} />}
        />
        <Route path="/add-day" component={App} />
        <Route component={Whoops404} />
      </HashRouter>
    </Switch>
  </Router>,
  document.getElementById("root")
);

Вот ссылки, которые передают параметры:

            <td colSpan={4}>
              <Link to="/list-days">All Days</Link>
              <Link to={"/list-days/powder"}>Powder</Link>
              <Link to={"/list-days/backcountry"}>Backcountry</Link>
            </td>

А вот где я пытаюсь передать params

  render() {
    return (
      <div className="app">
        <Menu />
        {this.props.location.pathname === "/" ? (
          <SkiDayCount
            total={this.countDays()}
            powder={this.countDays("powder")}
            backcountry={this.countDays("backcountry")}
          />
        ) : this.props.location.pathname === "/add-day" ? (
          <AddDayForm />
        ) : (
          <SkiDayList
            days={this.state.allSkiDays}
            filter={this.props.routeParams}
          />
        )}
      </div>
    );
  }

Answer 1

Здесь вы упоминаете :filter как динамический c url

<Route
          path="list-days/:filter"
          render={props => <App globalstore={globalstore} {...props} />}
        />

и прохождение stati c urls.

<Link to="/list-days">All Days</Link>
<Link to={"/list-days/powder"}>Powder</Link>
<Link to={"/list-days/backcountry"}>Backcountry</Link>

Вместо этого вам нужно указать переменную типа <Link to=/list-days/${var}>All Days</Link>