React 0.14 - 使用 react-router答案

【问题标题】：React 0.14 - using react-routerReact 0.14 - 使用 react-router
【发布时间】：2016-04-24 12:17:20
【问题描述】：

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

App.js - 渲染其中所有子组件的根文件。

"use strict";

import React from 'react';
import { Link } from 'react-router';

class App extends React.Component {
  render() {
    console.log(this.props.children)
    return(
        <div>
            <h1>Hello !</h1>
            <Link to="about">About</Link>
            {this.props.children} **//Is this necessary?**
        </div>
    ) 
  }
}
export default App;

关于.js

"use strict";

import React from 'react';

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

Index.js - 处理路由的文件

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'))

我正在使用 ecma6 在 React 0.14 中工作。为了使用react-router，是否需要在根组件中写入“this.props.children”？如果是这样，为什么？有没有其他方法可以实现 react-router？

【问题讨论】：

是的，必须的，不然怎么让Router渲染Routes？
无论你把this.props.children放在哪里都是加载匹配url路径的组件的地方。
你需要告诉它在哪里渲染路由中指定的子路由。 this.props.children 做到了。

标签： reactjs react-router

【解决方案1】：

是的，必须有this.props.children。

在您的 index.js 中，您已将路由定义为嵌套的。如果您在 / 中声明 about 路由，那么您必须将 about 页面呈现为 App 的子级。如果您不想在 App 中调用 this.props.children，则将它们分开相同级别的路由，但您无法将其用作 App 的一部分。

React 路由器基本上根据您对路由的定义将 About 组件作为子组件传递给 App。如果你不使用 this.props.children 你就做不到。

如果您的应用程序中有其他页面，例如关于页面或索引页面。如果不使用 this.props.children，它们也不会呈现。

【讨论】：

【解决方案2】：

this.props.children 是 React 在包含该组件的子组件的组件上自动设置的属性。不用this.props.children就可以使用react-router。

在您的情况下，App.js 组件中的 this.props.children 对应于应用程序中 <App /> 标记内的内容。如果没有<App /> 标签，那么里面就没有孩子，只会生成来自 App.js 的渲染。

【讨论】：

【解决方案3】：

这是一个使用 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')
);

HomePage component 渲染 props.children 也列在 GitHub 上。路由在 GitHub here 上的 index.jsx 中定义。所有嵌套组件也都列在 GitHub 上。

【讨论】：

【解决方案4】：

是的，你需要在 app.js 文件中使用 {this.props.children} 才能显示子路由页面。因为你设置 app.js 是 Router path="/" 中的索引路由。它将在主页中显示 app.js 数据，当您导航到下一个子页面时，它还会在同一页面中显示 app.js 数据和子页面数据。当您想重用像标题导航菜单这样的组件以在所有页面中显示相同的标题而不重新创建标题组件时，它将很有用。

【讨论】：