Роли маршрутов и компонентов в наборе реакторов для начинающих

Question

В настоящее время я пытаюсь понять, как React Starter Kit излагает проект и как его часть работает вместе.

В настоящее время борются с маршрутами и компонентами. Роль маршрутов заключается в том, чтобы решить, что отображать на определенном пути, но затем есть компоненты с App и все его подкомпоненты, которые отображаются .... вокруг каких маршрутов определяют?

Кажется, что то, что находится в App, всегда отображается. И маршруты определяют, что отображать внутри App как часть своих детей, это правильно?

Answer 1

№. Что находится внутри вашего компонента App, не всегда отображается, пока вы не определили как корневой компонент внутри вашей конфигурации маршрутов.

например

<Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <Route path="about" component={About}/> 
     <Route path="users" component={Users}> 
     <Route path="/user/:userId" component={User}/> 
     </Route> 
     <Route path="*" component={NoMatch}/> 
    </Route> 
    </Router> 

В коде выше определение

<Route path="/" component={App}> 

вызывает App компонент, который будет отображаться первым и все другие путями маршрута являются детьми App компонента.

Так что для второй части вашего вопроса - «маршрутов определить, что для отображения внутри приложения как часть своих детей, является то, что правильно»

Да, вы правы - Но чтобы отобразить другие компоненты, как дети корневого компонента, вы должны отметить, что в визуализации метод корневого компонента через

{this.props.children} 

например

const App = React.createClass({ 
    render() { 
    return (
     <div> 
     <h1>App</h1> 
     <ul> 
      <li><Link to="/about">About</Link></li> 
      <li><Link to="/users">users</Link></li> 
     </ul> 
     {this.props.children} 
     </div> 
    ) 
    } 
}) 

Итак, теперь вы говорите, что, когда URL-адрес / отображает мой корневой компонент i.e App, и если маршрут /about или /users отображает дочерние компоненты App i.e About или Users.

Ваш корневой компонент App похож на шаблон, в котором вы показываете заголовок, панель навигации, нижний колонтитул как статический контент. Но часть тела, где вы говорите

{this.props.children} 

меняется, поскольку ваш маршрут изменяется вместе с вашими компонентами.