首页 文章

反应路由器不渲染子组件

提问于
浏览 次
1

我'm learning react router and just cut off part of the Github' s 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>
reactjs react-router children

2 回答

  • 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

    回复于
  • 0

    试试这个：

    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 将工作 .

    回复于

相关问题