React / Redux Router.transitionTo不是一个函数

时间:2015-12-03 10:36:49

标签: reactjs firebase react-router redux

我无法弄清楚如何在我的组件中的re-base post回调中重定向。

https://github.com/tylermcginnis/re-base#postendpoint-options

我正在使用re-base将数据保存到Firebase。我正在使用Redux作为商店。

我尝试通过上下文传递路由器,但它没有帮助。

这是我得到的错误

main.js:344 Uncaught TypeError: Router.transitionTo is not a function

这些是我的进口(我知道其中有不同风格的混合物)

const React = require('react');
const ReactDOM = require('react-dom');
const ReactRouter = require('react-router');
const Router = ReactRouter.Router;
const Route = ReactRouter.Route;
const Navigation = ReactRouter.Navigation;
import createBrowserHistory from 'history/lib/createBrowserHistory';
const history = createBrowserHistory();
const h = require('./helpers');
const Link = require('react-router').Link;

const Rebase = require('re-base');
const base = Rebase.createClass('https://paulwp-polls-fcc.firebaseio.com');
const _ = require('underscore');
import { syncReduxAndRouter, routeReducer } from 'redux-simple-router';
const Redux = require('redux');
import { connect } from 'react-redux'
const createStore = Redux.createStore;
const combineReducers = Redux.combineReducers;
import { Provider } from 'react-redux';

这是我的组件:

const VoteOnPoll = React.createClass({
    componentDidMount: function() {
        const { store } = this.context;
        this.unsubscribe = store.subscribe(() =>
            this.forceUpdate()
        );
        this.choicesRef = base.listenTo('paulwp/choices', {
            context: this,
            asArray: true,
            then(choicesData){
                choicesData.map(function(choice){
                    store.dispatch({
                        type: 'LOAD_CHOICE',
                        choice: choice
                    })
                })

            }
        })
    },

    componentWillUnmount: function() {
        this.unsubscribe();
    },
    handleClick: function(e){
        e.preventDefault();
        const { store } = this.context;
        var state = store.getState();
        var choiceID = e.target.getAttribute('data-id');
        var choice = _.findWhere(state.choices,{id:choiceID});
        choice.voteTally += 1;
        store.dispatch({
           type: 'CAST_VOTE',
            choice: choice
        });

        var pollID =this.props.params.pollID;
        base.post('paulwp/choices/' + choice.id, {

            data: {desc: choice.desc, pollID: choice.pollID, voteTally: choice.voteTally},
            then(){
                Router.transitionTo('public/polls/results/poll-1449093953412');
            }
        });
    },

    render: function(){
        const { store } = this.context;
        var state = store.getState();
        var poll = _.findWhere(state.polls,{id:this.props.params.pollID});
        var choices = _.where(state.choices,{pollID:this.props.params.pollID});
        return (
            <div>
                <ul>
                    {choices.map((choice,index) => {
                        return <li key={index}><a onClick={this.handleClick} href="#" data-id={choice.id}>{choice.desc}</a></li>
                    })}
                </ul>
            </div>
        );
    }
});
VoteOnPoll.contextTypes = {
    store: React.PropTypes.object
};

有什么建议吗? 感谢

1 个答案:

答案 0 :(得分:1)

好的,所以我忘了我在使用Redux Simple Router :) 所以答案在文档中: https://github.com/jlongster/redux-simple-router

我只需要使用

{{1}}

而不是react-router方法