React 0.14 - 使用react-router

Question

以下是我的代码.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;

About.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？

Answer 1

是的,需要有this.props.children.

在index.js中,您已将路由定义为嵌套.如果你声明关于你的内航线/,那么你必须描绘关于为应用程序的子页面.如果您不想在App中调用this.props.children,那么将它们分成相同级别的路由,但您将失去将其用作App的一部分的能力.

React路由器基本上将About组件作为子组件传递给App,这取决于您对路由的定义.如果你不使用this.props.children就不能这样做.

如果您的应用程序中有其他页面,例如页面或索引页面.他们也不会在不使用this.props.children的情况下渲染.