web-dev-qa-db-ja.com

connected-react-router- <Router>の外部で<Route>を使用しないでください

以前にも同様の質問がありましたが、これは_connected-react-router_に固有のようです。 react-router(-dom)からRouterまたはBrowserRouterを使用でき、問題はありませんが、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>
        );
    }
}
_

比較的単純で、NPMページの example として_connected-react-router_が持っているものと似ています。

彼らのGitHubで 基本的な例 を見ても、同様のコーディングパターンがあります。

これらは私が得ているエラーです：

enter image description here

2番目のエラーは、高次コンポーネントに起因している可能性があるため、次のコードを使用します。

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-beta
  • _connected-react-router_ @ v6.0.0
  • react @ v16.5.2
javascriptreactjsconnected-react-router
5
wmash

使用する

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