Передача URL-параметра в компонент

Question

Я пытаюсь отфильтровать значения в компоненте, используя параметр URL, который я нажимаю на ссылку в том же компоненте.

Вот информация о маршрутизации, которая должна отправлять параметры URL.

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

window.React = React;

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

И ссылки, которые проходят через фильтр

  return (
    <div className="ski-day-list">
      <table>
        <thead>
          <tr>
            <th>Date</th>
            <th>Resort</th>
            <th>Powder</th>
            <th>Backcountry</th>
          </tr>
          <tr>
            <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>
          </tr>
        </thead>
        <tbody>
          {filteredDays.map((day, i) => (
            <SkiDayRow key={i} {...day} />
          ))}
        </tbody>
      </table>
    </div>
  );

Проблема в том, что я не получаю параметр фильтра, когда нажимаю ссылки "порошок" или "бэккантри". Я получаю параметр фильтра, только когда нажимаю на ссылку дня списка.

Answer 1

Попробуйте следующее:

<Routs path="/" component={App} exact />
<Route path="/list-days/:filter" component={App}>
<Route path="/list-days" component={App} exact>
<Route path="/add-day" component={App} exact/>
<Route component={Whoops404} />

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