Подключенный-реагирующий-маршрутизатор - Вы не должны использовать <Route> вне <Router>

Question

Подобные вопросы уже задавались ранее, но, похоже, это connected-react-router, я могу использовать Router или же BrowserRouter от react-router(-dom) и нет никаких проблем, но я хочу включить Redux, следовательно, использование для этого пакета.

App.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>
        );
    }
}

Относительно прямолинейно и похоже на то, что connected-react-router иметь в качестве примера на странице NPM.

Даже если я посмотрю на базовый пример их 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>.

Это потенциально проблема с тем, как <Route> от react-router играет с connected-react-router?

Версии:

• react-router @ v4.3.1
• react-router-dom @ v4.4.0-бета
• connected-react-router @ v6.0.0
• react @ v16.5.2

Answer 1

Я думаю, это потому, что вы используете 2 версии react-router (4.3.1 для основного маршрутизатора и 4.4.0-бета для react-router-dom). У меня такая же проблема. Я удалил react-router из моего проекта (так как он идет с react-router-dom) и используется v4.3.1. Казалось, что после этого все заработало нормально.

Все, что основано на этом ответе от connected-react-routerсопровождающий

Answer 2

Использование

"react-router": "^4.3.1"}

"react-router-dom": "^4.3.1"

Answer 3

Я столкнулся с этой же проблемой несколько лет спустя при переносе существующего пакета в монорепозиторий рабочих пространств npm. Удалениеreact-router(как предложил @gonzofish) у меня не сработало, но удалил его и обновилreact-router-domдо v5 сделал.