[英]Roles of routes and components in React Starter Kit
I am currently trying to understand the way React Starter Kit lays out the project and how its part work together. 我目前正在尝试了解React Starter Kit布置项目的方式以及它的各个部分如何协同工作。
Currently struggling with routes and components. 目前正在努力寻找路线和组件。 The role of routes is to decide what to display on a certain path but then there are components with App
and all its sub-components, which are displayed.... around what routes define? 路由的作用是确定要在特定路径上显示的内容,但随后会显示带有App
组件及其所有子组件。
It seems like what's in App
is always displayed. 似乎总是显示App
内容。 And routes define what to display inside of App
as part of its children, is that correct? 路由定义了在App
内部作为其子级显示的内容,对吗?
No. What is inside your App
component does not always gets displayed unless or until you have defined App
as root component inside your routes configuration. 第什么是你的内部App
组件,除非或直到你已经定义并不总是被显示的App
作为你的路由配置中根组件。
eg 例如
<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>
In above code defining 在上面的代码定义中
<Route path="/" component={App}>
causes App
component to be displayed first and all other route path are children of App
component. 导致首先显示App
组件,而所有其他路径路径都是App
组件的子级。
So for the second part of your question - "routes define what to display inside of App as part of its children, is that correct" 因此,对于您问题的第二部分-“路由定义了在App内部作为子元素显示的内容,这正确吗?”
Yes you are right - But to display other components as children of root component, you have to mention it in render method of your root component via 是的,您是对的-但是要将其他组件显示为根组件的子代,则必须通过以下方式在根组件的render方法中提及它:
{this.props.children}
eg 例如
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>
)
}
})
So Now you are telling that when url is /
display my root component ie App
and if route is /about
or /users
display children components of App
ie About
or Users
component. 因此,现在您要说的是,当url是/
显示我的根组件(即App
而当route是/about
或/users
显示App
子组件(即About
或Users
组件)。
Your root component App
is like a template where you show header, navigation bar, footer as static content. 您的根组件App
就像一个模板,在其中将页眉,导航栏,页脚显示为静态内容。 But body part where you say 但是你说的身体部位
{this.props.children}
is changing as your route changes with your children components. 随子组件的路线变化而变化。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.