Reactjs 反应路由器不呈现子组件_Reactjs_React Router_Children

Reactjs 反应路由器不呈现子组件

reactjs

Reactjs 反应路由器不呈现子组件,reactjs,react-router,children,Reactjs,React Router,Children,我正在学习react路由器，刚刚切断了Github的一部分，我正在使用webpack和http服务器来托管我的开发环境。当我转到routh路径时，我会看到我的应用程序组件，但当我转到时，我不会看到用户组件 var React=require（'React'）； var ReactDOM=require（'react-dom'）； var-Router=require（'react-Router'）。路由器； var Route=require（'react-router'）。路由； var br

我正在学习react路由器，刚刚切断了Github的一部分，我正在使用webpack和http服务器来托管我的开发环境。当我转到routh路径时，我会看到我的应用程序组件，但当我转到时，我不会看到用户组件

var React=require（'React'）；
var ReactDOM=require（'react-dom'）；
var-Router=require（'react-Router'）。路由器；
var Route=require（'react-router'）。路由；
var browserHistory=require（'react-router'）。browserHistory；
var App=React.createClass({
渲染：函数（）{
返回应用程序
}
});
//等等。
var Users=React.createClass({
渲染：函数（）{
返回(
使用者
)
}
})
document.addEventListener（“DOMContentLoaded”，函数（）{
ReactDOM.render((
)，document.getElementById（'main'）；
});

//index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="main">

    </div>
    <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

我也有同样的问题。所以问题是，

用户

是

应用程序

的孩子。因此，无论何时渲染

/users

，它都会首先渲染

应用程序

。但在应用程序定义中，您必须指定要在何处呈现其子级：

{this.props.children}

。因此，要么将其添加到定义中：

var App = React.createClass({
  render: function () {
    return <div>{this.props.children}</div>
  }
});
// etc.

var-App=React.createClass({
渲染：函数（）{
返回{this.props.children}
}
});
//等等。

或者将用户带到与应用程序相同的级别（我猜您不想这样做）：

document.addEventListener（“DOMContentLoaded”，函数（）{
ReactDOM.render((
)，document.getElementById（'main'）；
});

作为参考：

试试这个，然后：

var React = require('react');
var ReactDOM = require('react-dom');

import { Router, Route, Link, browserHistory } from 'react-router'

var App = React.createClass({
  render() {
    return <div>
             <ul>
               <li><Link to="/users">/users</Link></li>
             </ul>
             <div>app</div>
             <div>{this.props.children}</div>
           </div>
  }
})

var Users = React.createClass({
  render() {
    return (
      <div>users</div>
    )
  }
})

document.addEventListener("DOMContentLoaded", function () {

  ReactDOM.render((
    <Router history={browserHistory}>
      <Route path="/" component={App}>
        <Route path="users" component={Users}>
        </Route>
      </Route>
    </Router>
  ), document.getElementById('main'));
});

var React=require（'React'）；
var ReactDOM=require（'react-dom'）；
从“react Router”导入{Router，Route，Link，browserHistory}
var App=React.createClass({
render（）{
返回

/使用者

应用程序
{this.props.children}
}
})
var Users=React.createClass({
render（）{
返回(
使用者
)
}
})
document.addEventListener（“DOMContentLoaded”，函数（）{
ReactDOM.render((
)，document.getElementById（'main'）；
});

改变了什么：

我添加了
```
{this.props.children}
```
，子组件（在本例中为用户）将在其中呈现
我添加了
```
/users
```

现在，如果你点击链接，它就像一个符咒

请注意，如果您使用的是webpack dev服务器，浏览器URL将与您实际使用的URL不同。）我有这个问题，尽管你可能也有同样的挣扎）。因此，与其使用

http://localhost:8000/webpack-开发服务器/

打开

http://localhost:8000/

（它重定向到

http://localhost:8000/#/?_k=some_weird_hash

）和

http://localhost:8000/#/users

行得通。

hi@fodma1我按照你在第一条建议中提到的做了，但没有成功。您还需要更改其他内容吗？@jlei好吧，我有另一个想法：您的HTML是什么样子的？您的目标是

document.getElementById（'main'）

，我使用了

document.body

我将其更改为document.body，但它仍然不起作用-您介意吗。但是应用程序组件仍然可以工作，所以用户组件没有出现是很奇怪的。我对它进行了编辑，以包含我的HTML，这很不错，basici也尝试将用户带到同一行，但也不起作用。您用来查看用户组件的URL是什么？它是？

document.addEventListener("DOMContentLoaded", function () {

  ReactDOM.render((
    <Router history={browserHistory}>
      <Route path="/" component={App}>
      </Route>
      <Route path="/users" component={Users}>
      </Route>
    </Router>
  ), document.getElementById('main'));
});

var React = require('react');
var ReactDOM = require('react-dom');

import { Router, Route, Link, browserHistory } from 'react-router'

var App = React.createClass({
  render() {
    return <div>
             <ul>
               <li><Link to="/users">/users</Link></li>
             </ul>
             <div>app</div>
             <div>{this.props.children}</div>
           </div>
  }
})

var Users = React.createClass({
  render() {
    return (
      <div>users</div>
    )
  }
})

document.addEventListener("DOMContentLoaded", function () {

  ReactDOM.render((
    <Router history={browserHistory}>
      <Route path="/" component={App}>
        <Route path="users" component={Users}>
        </Route>
      </Route>
    </Router>
  ), document.getElementById('main'));
});