使用 react-router 加載 Url 參數

Question

我正在嘗試使用 react-router 傳遞一些 URL 參數，但我無法訪問我傳遞的參數，而頁面也沒有。

這是我渲染路由器的地方：

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>

這是我嘗試傳遞參數的地方

  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作為動態 url

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

並傳遞靜態網址。

<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>這樣的變量