加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

reactjs – React 0.14 – 使用反应路由器

发布时间:2020-12-15 20:51:31 所属栏目:百科 来源:网络整理
导读:以下是我的代码. app.js是根文件,about.js是只显示一些文本的文件,index.js通过使用react-router处理所有的路由.我想在app.js中渲染我的about.js.如果我不在app.js中写“this.props.children”,它不会呈现. App.js – 呈现其中的所有子组件的根文件. "use st
以下是我的代码. 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工作.
为了使用反应路由器,是否有必要在根组件中写入“this.props.children”?如果是这样,为什么?
有没有其他方法来实现反应路由器?

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

在您的index.js中,您将路由定义为嵌套.如果你声明你的/里面的路由,那么你必须渲染关于页面作为应用程序的孩子.如果您不想在App中调用this.props.children,然后使它们分开相同级别的路由,但是您失去了将其作为App的一部分使用的能力.

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

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读