反应路由器不渲染子组件答案

【问题标题】：react router not rendering child component反应路由器不渲染子组件
【发布时间】：2016-03-12 03:38:33
【问题描述】：

我正在学习 React 路由器，只是切断了 Github 的部分 page，我正在使用 webpack 和 http-server 在 http://localhost:8080 托管我的开发环境。当我转到 routh 路径时，我看到了我的 App 组件，但是当我转到 http://localhost:8080/users 时，我没有看到 Users 组件。

var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var browserHistory = require('react-router').browserHistory;

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

var Users = React.createClass({
  render: function () {
    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'));
});

//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>

【问题讨论】：

标签： reactjs react-router children

【解决方案1】：

我遇到了完全相同的问题。所以问题是，users 是app 的孩子。所以每当你渲染/users，它首先渲染app。但是在应用程序定义中，您必须指定要在何处呈现其子项：{this.props.children}。所以要么将其添加到定义中：

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

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

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

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

供参考：https://github.com/reactjs/react-router#whats-it-look-like

【讨论】：

嗨@fodma1 我做了你在第一个建议中提到的事情，但没有奏效。你还需要改变什么吗？
@jlei 好吧，我有另一个想法：您的 HTML 看起来如何？你的目标是document.getElementById('main')，我用的是document.body
我将其更改为 document.body ，但它仍然无法正常工作 - 你介意吗？应用程序组件仍然可以工作，所以用户组件没有出现很奇怪。我已经对其进行了编辑以包含我的 HTML，它非常基本
我也尝试将用户带到同一行，但它也不起作用。您用来查看用户组件的 URL 是什么？是localhost:8080/users吗？

【解决方案2】：

然后试试这个：

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

发生了什么变化：

我添加了<div>{this.props.children}</div> 子组件（在本例中为用户）组件被渲染的地方
我添加了<Link to="/users">/users</Link>。

现在，如果您单击该链接，它就像一个魅力！

请注意，如果您使用的是 webpack 开发服务器，浏览器 URL 不会与您实际使用的 URL 相同。）我有这个问题，虽然你可能有同样的挣扎）。所以不要打开http://localhost:8000/webpack-dev-server/，而是打开http://localhost:8000/（重定向到http://localhost:8000/#/?_k=some_weird_hash）和http://localhost:8000/#/users会工作。

【讨论】：