Question

import React from 'react';
import { Router, Link, Navigation } from 'react-router';

export default class ResourceCard extends React.Component {
    render() {
        return (
                <div onClick={this.routeHandler.bind(this)}>
                LINK
                </div>                  
        );
    }
    routeHandler(){
        this.transitionTo('someRoute', {objectId: 'asdf'})
    }
}

我无法得到它，出了什么问题？我收到一个错误： Uncaught TypeError: this.transitionTo is not a function

我已尝试过在docs或gitHub问题中找到的所有内容：

this.transitionTo('someRoute', {objectId: 'asdf'})
this.context.transitionTo('someRoute', {objectId: 'asdf'})
this.context.route.transitionTo('someRoute', {objectId: 'asdf'})
etc.

路线和参数是正确的，在这种情况下它可以正常工作：

<Link to="'someRoute" params={{objectId: 'asdf}}

P.S。 react-router，react和其他库是最新的

Answer 1

Navigation组件是Mixin，需要相应地添加到组件中。如果你想绕过Mixin（我认为是React-Router的方向），你需要在组件上设置contextTypes，如下所示：

var ResourceCard = React.createClass({
    contextTypes: {
        router: React.PropTypes.func
    }, ...

然后你可以拨打this.context.router.transitionTo。

Answer 2

这适用于react 0.14.2和react-router 1.0.3

import React from 'react';
import { Router, Link } from 'react-router';

export default class ResourceCard extends React.Component {
    constructor(props,) {
        super(props);
    }

    render() {
        return (
            <div onClick={this.routeHandler.bind(this)}>
            LINK
            </div>                  
            );
    }
    routeHandler(){
        this.props.history.pushState(null, '/');
    }
}

Answer 3

由于目前还没有针对ES6的mixin支持，您需要更改一些内容才能使其正常工作。router是一个选择加入的上下文类型，因此您必须明确定义{班级{1}}。然后在contextTypes中，您必须将constructor和context传递给超级课程。在调用转换时，您必须使用props。并且不需要导入this.context.router.transitionTo。

Navigation

React-router transitionTo不是一个函数

3 个答案: