【问题标题】:React-Router RouteHandler UndefinedReact-Router RouteHandler 未定义
【发布时间】:2016-07-31 15:38:10
【问题描述】:

我无法正确导入 RouteHandler。这是我的代码:

var React = require('react');
var ReactDOM = require('react-dom');
var ReactRouter = require('react-router');
var ActivityView = require('./ActivityView');

var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
var RouteHandler = ReactRouter.RouteHandler;
var hashHistory = ReactRouter.hashHistory;
var IndexRoute = ReactRouter.IndexRoute;

var App = React.createClass({
    render: function() {
        return (
            <div>
                <div className="navbar navbar-default">
                    <ul className="nav navbar-nav navbar-right">
                        <li><Link to="app">Dashboard</Link></li>
                    </ul>
                </div>

                <RouteHandler />
            </div>
        );  
    }   
});

ReactDOM.render(
    <Router history={hashHistory}>
        <Route name="app" path="/" component={App}>
            <IndexRoute component={ActivityView} />
        </Route>
    </Router>,
    document.getElementById('content')
);

我不断收到错误:

警告:React.createElement:类型不应为 null、未定义、布尔值或数字。它应该是一个字符串(对于 DOM 元素)或一个 ReactClass(对于复合组件)。检查App的渲染方法。

如果我删除&lt;RouteHandler /&gt;,这个警告就会消失并且导航栏会呈现。我是不是在这里错误地导入了 RouteHandler?

【问题讨论】:

标签: javascript reactjs


【解决方案1】:

根据upgrading guide中的部分

RouteHandler 不见了。路由器现在会根据活动路由自动填充您的组件的this.props.children

// v0.13.x
<RouteHandler/>

// v1.0
{this.props.children}

与从父级接收子级的所有其他 React 组件一样,您可以使用标准的 React.cloneElement 模式将额外的 props 注入到您提供的子级中。

您通常应该避免过度使用这种模式,因为这会通过渲染树而不是路由树紧密耦合您的路由组件,这会使重构更加困难。

Link to complete Documentation

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-10-04
    • 2017-08-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-09-29
    • 2020-09-18
    • 2017-04-28
    相关资源
    最近更新 更多