正在使用react路由器加载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} />}
/>

以及传递静态url。

<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>这样的变量