ReactJS路由示例中的查询

我一直在学习ReactJS中的路由。我对本教程中给出的代码有一些疑问

1-在此代码的应用程序组件中，有一个名为“children”

{this.props.children}

的prop值。但问题是这个道具值从哪里传递到这个应用程序组件

2-在

main.js

文件中，使用了浏览器历史记录

。问题是为什么在那里使用/写

组件：

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

class App extends React.Component {
   render() {
      return (
         <div>
            <ul>
               <li><Link to = "/home">Home</Link></li>
               <li><Link to = "/about">About</Link></li>
               <li><Link to = "/contact">Contact</Link></li>
            </ul>

           {this.props.children}
         </div>
      )
   }
}

export default App;

class Home extends React.Component {
   render() {
      return (
         <div>
            <h1>Home...</h1>
         </div>
      )
   }
}

export default Home;

class About extends React.Component {
   render() {
      return (
         <div>
            <h1>About...</h1>
         </div>
      )
   }
}

export default About;

class Contact extends React.Component {
   render() {
      return (
         <div>
            <h1>Contact...</h1>
         </div>
      )
   }
}

export default Contact;

从“React”导入React；
从“react dom”导入react dom；
从“react Router”导入{Router，Route，Link，browserHistory，IndexRoute}
类应用程序扩展了React.Component{
render（）{
返回(

家
关于
接触

{this.props.children}
)
}
}
导出默认应用程序；
类Home扩展了React.Component{
render（）{
返回(
家
)
}
}
导出默认主页；
类关于扩展React.Component{
render（）{
返回(
关于
)
}
}
导出默认值约为；
类Contact扩展了React.Component{
render（）{
返回(
联系
)
}
}
导出默认联系人；

main.js

ReactDOM.render((
   <Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {Home} />
         <Route path = "home" component = {Home} />
         <Route path = "about" component = {About} />
         <Route path = "contact" component = {Contact} />
      </Route>
   </Router>

), document.getElementById('app'))

ReactDOM.render((
)，document.getElementById（'app'））

关于

此.props.children

，它用于指React组件的子组件。它就在那儿。也是一篇关于

儿童
道具的文章。

至于
browserHistory
，它是一个用于管理和存储应用程序会话历史记录的对象。（
browserHistory
自v4起不再用于React路由器。请改用
history
。更多信息）
本教程介绍了React路由器（v3）的过时版本，这可能是您感到困惑的原因

让我们从你的第二个问题开始。v3和v4都将其组件包装在一个更高级别的
组件中。该组件维护路由器的状态，解析当前路由是什么（相应地有条件地呈现路由），推动新的更改并保留以前路由的历史记录。React router v3要求您将预定义（或自定义）的
历史记录
对象作为道具传递。您正在使用的浏览器历史记录（browserHistory）尽可能多地使用，并且是生产中常用的。随着v4的引入，预制路由器组件（例如，
BrowserRouter
）应运而生，它们不需要
历史
道具就可以实现相同的目标。请注意，v4还划分了其组件，因此您必须从“react router dom”而不是“react router”导入
BrowserRouter

在v3中，
{this.props.children}
由这个顶级
路由器
组件生成和传递。嵌套在
路由
中的任何活动路由都被视为其子路由。举个例子：

<Route path = "/" component = {App}>
  <Route path = "about" component = {About} />
  <Route path = "home" component = {Home} 
    <Route path = "secret" component = {secret} />
  </Route>
</Route>