javascript - 将 Container 组件连接到 ReactJs 中的 Redux 存储，但出现错误，提示 BrowserRouter 需要一个字符串但得到一个对象

问题描述

我正在尝试将 Container 连接到 redux 商店，但出现此错误：

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象。

检查Route.

我正在尝试按照此处的说明进行操作：

https://react-redux.js.org/using-react-redux/connect-mapdispatch

我的尝试在底部被注释掉。交换正常的导出默认语句会产生此错误，但正常方式工作正常，所以我知道这是连接的问题。

我的容器：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import axios from 'axios';
//import { bindActionCreators } from 'redux'
import queryString from 'query-string';
import { signIn } from "../actions";


class MomentumContainer extends Component {

    state = {display: "Waiting"};

    componentWillMount() {
        const query = queryString.parse(this.props.location.search);
        console.log(`query: ${JSON.stringify(query)}`);
        if(query.user_id) {
            console.log(`User logged in w/ id: ${query.user_id}`);

            //this.props.dispatch(signIn(query.user_id));
        }
    }

    async componentDidMount() {
        const dev = process.env.REACT_APP_DEV_SERVER_ENDPOINT;
        const prod = process.env.REACT_APP_PROD_SERVER_ENDPOINT;
        const base_endpoint = process.env.REACT_APP_DEV_MODE ? dev : prod;
        const api_endpoint = `${base_endpoint}momentum`;
        //TODO above can be handled on app startup and managed by redux??
        //console.log(api_endpoint);

        const response = await axios.get(api_endpoint);
        this.setState({display: response.data});

    }
    render() {
        return <h1>{this.state.display}</h1>
    }
}

// // Tried this
// const actionCreators = { signIn };
// export default connect(null, actionCreators)(MomentumContainer);

// // Tried this
//export default connect()(MomentumContainer);

// This works
export default MomentumContainer;

我的 index.js 文件：

import React from "react";
import ReactDOM from "react-dom";
import {Provider} from "react-redux";
import {createStore, compose, applyMiddleware} from "redux";
import thunk from "redux-thunk";
import promise from 'redux-promise-middleware';
import logger from "redux-logger";
import registerServiceWorker from "./registerServiceWorker";
import "./index.css";
import App from "./App";
import {BrowserRouter, Route, Switch} from "react-router-dom";
import reducers from './reducers';
import MomentumContainer from "./containers/MomentumContainer";



const { REACT_APP_DEV_MODE } = process.env;
const dev_mode = JSON.stringify(REACT_APP_DEV_MODE) === JSON.stringify("true");
const middleware = applyMiddleware(promise, thunk, logger);

let store_dev;
if (dev_mode === true) {
    console.log('App starting in development mode.');
    const allStoreEnhancers = compose(
        middleware,
        window.devToolsExtension && window.devToolsExtension()
    );
    store_dev = createStore(reducers, {}, allStoreEnhancers)
} else {
    console.log('App starting in production mode');
}

const store_production = createStore(reducers, {}, middleware);
const store = dev_mode ? store_dev : store_production;

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <Switch>
                <Route path="/" exact component={App} />
                <Route path="/Momentum" exact component={MomentumContainer} />
            </Switch>
        </BrowserRouter>
    </Provider>,
    document.getElementById("root")
);
registerServiceWorker();

我的 package.json：

{
  "name": "ticker-alert-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^3.9.3",
    "ajv": "^6.10.0",
    "axios": "^0.18.0",
    "materialize-css": "^1.0.0-rc.2",
    "query-string": "^6.1.0",
    "react": "^16.8.6",
    "react-dom": "^16.4.0",
    "react-redux": "^7.0.3",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "redux-promise": "^0.6.0",
    "redux-promise-middleware": "^6.1.0",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

任何帮助/建议将不胜感激！

标签： javascriptreactjsredux

javascript - 将 Container 组件连接到 ReactJs 中的 Redux 存储，但出现错误，提示 BrowserRouter 需要一个字符串但得到一个对象

问题描述

解决方案

推荐阅读