在同一路由中使用 Route 组件和 Route 子组件答案

【问题标题】：Use Route component and Route children in same route在同一路由中使用 Route 组件和 Route 子组件
【发布时间】：2019-01-15 16:43:48
【问题描述】：

我是 react js 的初学者，现在我正在练习路由，但陷入了下面的嵌套路由错误：

你不应该在同一个路由中使用 Route 组件和 Route 子组件； <Route children> 将被忽略。

通过上面可以看出路由和子组件不能在我拥有的同一条路由中使用，所以我该如何修复下面的代码使其可以工作：

  const About=(props)=>(
   <div>
    {props.children}
    <h2>About</h2>
   </div>
  );


 const Cityimage=()=>(

        <h1>In City</h1>
 );

 const Sportsimage=()=>(
   <h2>In Sports</h2>
 );

ReactDOM.render(

<Router>
    <Switch>
        <Route path="/app" component={App} />

        <Route  path="/about" component={About}>
             <Route  path="city" component={Cityimage}/>
             <Route  path="sport" component={Sportsimage}/>
        </Route>

    </Switch>
</Router>
   ,document.getElementById('root'));

我有一条父路线 About 及其两个子路线 city 和 sport。如何修复我的代码？

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

你可以试试吗？

<Route  path="/about" component={About}/>
<Route  path="/about/city" component={Cityimage}/>
<Route  path="/about/sport" component={Sportsimage}/>

【讨论】：