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

问：

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

不应在同一路由中使用路由组件和 路由子项; 将被忽略。<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'));

我有一个父路线关于和它的两个孩子路线城市和运动。如何修复我的代码？