反应路由器条件路由

Question

这是我运行良好的路线配置。

<Route path="/" component={App}>
  <IndexRoute component={Home}/>
  <Route path="city">
    <Route path=":city" component={City} />
  </Route>
  <Route path="country">
    <Route path=":country" component={Country} />
  </Route>
</Route>

它适用于网址 example.com/city/london 和 example.com/country/england

现在我想改变它，以便在用户输入时

example.com/london -> 城市，

example.com/england -> 国家

我现在该如何设置路线？

Answer 1

我建议你有一个组件路由，它将根据路由参数决定要渲染哪个组件。

<Route path="/" component={App}>
 ...
 <Route path=":place" component={CommonRoute} />
 ...
</Route>

在您的 CommonRoute 组件中，您需要一些逻辑来识别 param 是城市还是国家/地区。

...
componentDidMount() {
    let param = this.props.match.params.place;
    ...
    //Logic to decide what place is. i.e (city or country)
    //set the store state accordingly
    ...
}
...

render() {
  return(
    ...
    this.props.reducerName.isCity && </City>
    this.props.reducerName.isCountry && </Country>
    ...
  )
}  

嗯，这只是一个想法。如果这些有效，我建议您尝试并告知。希望这会有所帮助。

更新：给你。 Working Demo