反应路由器条件路由

Question

这是我的Route配置，运行良好。

<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>

它适用于urls 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