【问题标题】:React/Redux Router.transitionTo is not a functionReact/Redux Router.transitionTo 不是函数
【发布时间】:2023-04-07 00:49:01
【问题描述】:

我不知道如何在我的组件中的 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
};

有什么建议吗? 谢谢

【问题讨论】:

  • 什么版本的 react-router?

标签: reactjs firebase react-router redux


【解决方案1】:

好的,所以我忘记了我使用的是 Redux 简单路由器 :) 所以答案在文档中: https://github.com/jlongster/redux-simple-router

我只需要使用

store.dispatch(updatePath('/public/polls/results/poll-1449093953412'))

而不是 react-router 方法

【讨论】:

    猜你喜欢
    • 2019-12-15
    • 2017-12-30
    • 2020-08-18
    • 2017-03-14
    • 2016-08-19
    • 2020-04-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多