Используйте компонент «Маршрут» и дочерние маршруты в одном маршруте

Question

Я новичок, чтобы реагировать на 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'));

У меня есть родительский маршрут О и его двое детей, маршрут город и спорт. Как я могу исправить свой код?

Answer 1

Вы можете попробовать?

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