之前已经问过类似的问题,但这似乎是针对 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
作为example在 NPM 页面上。
即使我查看 basic example在他们的 GitHub 上,有一个类似的编码模式。
这些是我得到的错误:
第二个错误似乎源 self 的高阶组件,所以这是代码:
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
最佳答案
我认为这是因为您使用了 2 个版本的 react-router
(4.3.1 用于核心路由器,4.4.0-beta 用于 react-router-dom
)。我有同样的问题。我从我的项目中删除了 react-router
(因为它带有 react-router-dom
)并使用了 v4.3.1。之后它似乎工作正常。
所有基于 this response 的内容来自 connected-react-router
的维护者
关于javascript - connected-react-router - 你不应该在 <Router> 之外使用 <Route>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54115843/