ReactJS路由示例中的查询

我一直在学习从this tutorial在ReactJS中的路由。我从本教程中给出的代码中有一些问题。ReactJS路由示例中的查询

1-在此代码的应用程序组件中，存在一个名为“children”{this.props.children}的prop值。但问题是，这个属性值是从哪里传递给这个App组件的？

2-在main.js文件中有浏览器历史使用<Router history = {browserHistory}>。问题是，为什么在那里使用/写入？

组件：

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;

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

来源

2017-09-24 Agha

关于this.props.children，它被用来指代一个阵营组件的子组件。它在React docs。 This也是关于children道具的文章。
至于browserHistory，它是一个对象，用于管理和存储您的应用程序的会话历史记录。（browserHistory中不再使用路由器做出反应，因为V4。使用history来代替。更多关于它here）

来源

2017-09-25 04:38:29 Dane

本教程介绍阵营路由器过时的版本（第三版），这可能是为什么你困惑。

让我们从第二个问题开始。 v3和v4都将它们的组件包装在较高级别的组件<Router>中。此组件维护路由器的状态，解析当前路由（有条件地渲染路由），推送新的更改并保留先前路由的历史记录。 React路由器v3要求您传递预定义（或自定义）的对象作为道具。您正在使用的那个，browserHistory，尽可能多地使用HTML5 history API，并且通常用于生产。随着v4的推出出现了预制路由器组件（例如BrowserRouter），这些组件完成相同的目标，而不需要history支持。请注意，v4也将其组件分隔，因此您必须从'react-router-dom'而不是'react-router'导入BrowserRouter。

在v3中，生成{this.props.children}并由此顶层Router组件传递。嵌套在route内的任何活动路线都被视为其子女。就拿这个例子：

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

这里，“约”和“家”的路线是“/”和“秘密”潜力儿童的“家”唯一的潜在孩子的路线。如果我们的查询是“/ home/secret”，那么“/”将通过“home”并且“home”通过children对象通过“secret”。 React路由器v4放弃了这种设计方案;不再有嵌套的子路线。

如果您有兴趣继续学习v3，我推荐他们的docs。

来源

2017-09-25 04:41:17

ReactJS路由示例中的查询

回答

相关问题