Reactjs 反应0.14-使用反应路由器

下面是我的代码。app.js是根文件，about.js是只显示一些文本的文件，index.js使用react router处理所有路由。我想在app.js中呈现我的about.js。如果我不在app.js中编写“this.props.children”，它就不会呈现

App.js-呈现其中所有子组件的根文件。

“严格使用”；
从“React”导入React；
从“反应路由器”导入{Link}；
类应用程序扩展了React.Component{
render（）{
console.log（this.props.children）
返回(
你好
关于
{this.props.children}**//这有必要吗**
) 
}
}
导出默认应用程序；

关于.js

“严格使用”；
从“React”导入React；
类关于扩展React.Component{
render（）{
返回(
关于页面！
)
}
}
导出默认值约为；

Index.js-处理路由的文件

从“React”导入React；
从'react dom'导入{render}；
从“react Router”导入{Router，Route，Link，browserHistory}
/*需要自己的自定义文件*/
从“./App”导入应用程序；
从“/关于”导入关于；
渲染((
)，document.getElementById（'app'））

我使用ecma6在React 0.14中工作。 为了使用react路由器，是否需要在根组件中写入“this.props.children”？若然，原因为何？

---

是否有其他方法实现react路由器？

此.props.children

是react在包含该组件的子组件上自动设置的属性。您可以使用react路由器，而无需放置

this.props.children

---

在您的例子中，App.js组件中的

this.props.children

对应于应用程序中

标记中的内容。如果没有

标记，则不会将子对象放入其中，只会生成App.js中的渲染。

是，需要有this.props.children

在index.js中，您已将路由定义为嵌套路由。如果您在/中声明关于路由，则必须将“关于”页面作为应用程序的子级呈现。如果您不想在应用程序中调用this.props.children，请将其与同级路由分开，但您将失去将其作为应用程序一部分使用的能力

React router基本上会根据您对路由的定义将About组件作为子组件传递给应用程序。如果你不使用这个.props.children，你就做不到

---

如果您的应用程序中还有其他页面，如关于页面或索引页面。如果不使用this.props.children，它们也不会进行渲染。

下面是一个使用ReactSpeed.com嵌套路由的完整示例

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={HomePage}>
      <IndexRoute component={CardStack} />
      <Route path="/roadmap" component={Roadmap} />
      <Route path="/ajax" component={CardStackAjax} />
      <Route path="/infographics" component={CardStackInfo} />
      <Route path="/media" component={CardStackMedia} />
      <Route path="/forms" component={CardStackForm} />
      <Route path="/buttons" component={CardStackButton} />
      <Route path="/blog" component={PostSummary} />
      <Route path="/blog/:slug" component={PostDetail} />
    </Route>
    <Route path="*" component={HomePage}>
      <IndexRoute component={MissingRoute} />
    </Route>
  </Router>,
  document.getElementById('app')
);

ReactDOM.render(
,
document.getElementById（'app'）
);

---

GitHub上还列出了渲染

props.children

。路由在GitHub上可用的

index.jsx

中定义。GitHub上也列出了所有嵌套组件。

是的，您需要使用app.js文件中的{this.props.children}来显示子路由页面。因为您将app.js设置为Router path=“/”中的索引路由。它将在主页中显示app.js数据，当您导航到下一个子页面时，它还会在同一页面中显示app.js数据和子页面数据。

---

如果您希望重用诸如页眉导航菜单之类的组件，以便在所有页面中显示相同的页眉，而无需重新创建页眉组件，则此功能将非常有用。

是的，这是必要的，否则，您将如何让路由器呈现路由？无论您放置在何处

this.props.children

都会加载与url路径匹配的组件。您需要告诉它在何处呈现路由中指定的子路由

this.props.children

实现了这一点。

"use strict";

import React from 'react';

class About extends React.Component {
  render() {
    return(
        <div>
            <h1>About page!</h1>
        </div>
    )
  }
}
export default About;

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, Link, browserHistory } from 'react-router'

/*Require own custom files*/
import App from './app';
import About from './about';

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="about" component={About}/>
    </Route>
  </Router>
), document.getElementById('app'))

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={HomePage}>
      <IndexRoute component={CardStack} />
      <Route path="/roadmap" component={Roadmap} />
      <Route path="/ajax" component={CardStackAjax} />
      <Route path="/infographics" component={CardStackInfo} />
      <Route path="/media" component={CardStackMedia} />
      <Route path="/forms" component={CardStackForm} />
      <Route path="/buttons" component={CardStackButton} />
      <Route path="/blog" component={PostSummary} />
      <Route path="/blog/:slug" component={PostDetail} />
    </Route>
    <Route path="*" component={HomePage}>
      <IndexRoute component={MissingRoute} />
    </Route>
  </Router>,
  document.getElementById('app')
);