已连接的路由器-不应在<路由器>外部使用<路由>

以前也有人问过类似的问题,但这似乎是特定于 connected-react-router .我可以用 Router 或 BrowserRouter 从…起 react-router(-dom) 没有问题,但我想合并Redux,因此使用这个包。

应用程序。js

import React, { Component } from "react";
import { Provider } from "react-redux";
import { ConnectedRouter } from "connected-react-router";
// import { Router, Route, Switch } from "react-router-dom";
import { Route, Switch } from "react-router";

// Routes
// import routes from "./js/routes";

// Components
import PimberlyLogin from "./js/containers/PimberlyLogin";
import CognitoLogin from "./js/containers/CognitoLogin";
import CognitoChangePassword from "./js/views/CognitoChangePassword";
import ListGroups from "./js/containers/ListGroups";
import VerificationCode from "./js/views/VerificationCode";

// Auth component
import { requireAuthentication } from "./js/components/AuthenticatedComponent";

// Styles
import "./css/app.css";

export default class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Provider store={this.props.store}>
                <ConnectedRouter history={this.props.history}>
                    <Switch>
                        <Route
                          path="/"
                          component={PimberlyLogin}
                          exact={true}/>
                        <Route
                          path="/cognito/login"
                          component={CognitoLogin}
                          exact={true}/>
                        <Route
                          path="/cognito/changePassword"
                          component={CognitoChangePassword}
                          exact={true}/>
                        <Route
                          path="/groups"
                          component={requireAuthentication(ListGroups)}
                          exact={true}/>
                        <Route
                          path="/cognito/verificationCode"
                          component={VerificationCode}
                          exact={true}/>
                    </Switch>
                </ConnectedRouter>
            </Provider>
        );
    }
}

比较直截了当,和什么相似 连接路由器 作为一个 example 在NPM页面上。

即使我看着 basic example 在他们的GitHub上,有一种类似的编码模式。

以下是我遇到的错误:

第二个错误似乎源于我的高阶组件,因此代码如下:

PimberlyLogin。js

import { connect } from "react-redux";
import { withRouter } from "react-router-dom";
import { bindActionCreators } from "redux";

import PimberlyLoginComponent from "../views/PimberlyLogin";

import { setUsersPersist } from "../actions/user";
import { setGroupsPersist } from "../actions/group";

const mapStateToProps = (state, props) => {
    return {
        users: state.user,
        groups: state.group
    };
};

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        setUsersPersist: () => setUsersPersist(),
        setGroupsPersist: () => setGroupsPersist()
    });
};

export default withRouter(connect(
    mapStateToProps,
    mapDispatchToProps
)(PimberlyLoginComponent));

编辑

我到处玩抓 <Switch> 和 <Route> 来自不同的包裹 ( react-router & react-router-dom ) .目前我正在做:

import { Switch, Route } from "react-router";

...我得到: You should not use <Route> outside a <Router>.

如果我这样做:

import { Switch } from "react-router-dom";
import { Route } from "react-router";

我得到: You should not use <Switch> outside a <Router>.

这可能是一个如何解决的问题吗 <路线> 从…起 反应路由器 玩弄 连接路由器 ?

版本:

• 反应路由器 @v4。3.1
• 反应路由器dom @v4。4.0-beta
• 连接路由器 @v6。0
• react @v16。5.2