Question

我正在学习反应路由器，只是切断了部分Github的page，我正在使用webpack和http-server在http://localhost:8080托管我的开发环境。当我去罗斯路径时，我看到了我的应用程序组件，但是当我转到http://localhost:8080/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>

Answer 1

我有完全相同的问题。事实是，users是app的孩子。因此，每当您呈现/users时，首先会呈现app。但是在应用程序定义中，您必须指定要为其子项呈现的位置：{this.props.children}。所以要么将它添加到定义中：

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

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

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

Answer 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>，其中子项（在本例中为Users）组件已呈现
我添加了<Link to="/users">/users</Link>。

现在，如果你点击链接，它就像一个魅力！

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

反应路由器不渲染子组件

2 个答案: