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

相对简单，类似于NPM页面上的connected-react-router和example。

即使我在他们的GitHub上查看basic example，也有类似的编码模式。

这些是我得到的错误：

第二个错误似乎可能源自我的高阶组件，所以这是代码：

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

Answer 1

我认为这是因为您使用的是react-router的两个版本（核心路由器为4.3.1，react-router-dom为4.4.0-beta）。我有同样的问题。我从项目中删除了react-router（因为它与react-router-dom一起使用）并使用v4.3.1。在那之后似乎工作正常。

所有基于connected-react-router维护者的this response

Answer 2

使用

"react-router": "^4.3.1"}

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

connected-react-router-您不应在<router>外使用<route>

2 个答案: