无法将 "connected" HOC 与反应路由器一起使用

Question

我正在制作一个HOC，可以用来确保登录的用户不会访问某些路线(我称之为"访客路线"(。它将连接到我的redux存储以访问用户的loggedIn状态。以下是我对HOC的实现：

import React, { Component } from 'react';
import { connect } from 'react-redux';
export function guestRoute(ComposedComponent) {
class GuestRoute extends Component {
componentWillMount() {
if (this.props.loggedIn) {
this.props.router.push('/')
}
}
componentWillUpdate() {
if (this.props.loggedIn) {
this.props.router.push('/')
}
}
render() {
return (
<ComposedComponent {...this.props} />
);
}
}
const mapStateToProps = (state) => {
const { loggedIn } = state.auth;
return { loggedIn };
};
return connect(mapStateToProps)(GuestRoute);
}

正如您所看到的，我正在返回一个"已连接"的包装器组件。

以下是我的路线以及这个HOC是如何使用的：

import React from 'react';
import { Route } from 'react-router';
import { guestRoute } from './routes/guestRoute';
import Main from './layout/Main';
import Signup from './auth/Signup';
const routes = (
<Route component={Main}>
<Route path="/signup" component={guestRoute(Signup)} />
</Route>
);
export default routes;

这给了我两个错误：

Warning: Failed prop type: Invalid prop `component` supplied to `Route`.

和

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: symbol.

我如何才能返回一个可以在路由中使用的有效组件，而不是connect返回的组件？

编辑：我使用的是react v16.13.1和react路由器v3.2.1

下面是一个重现错误的沙盒：https://codesandbox.io/s/zealous-austin-vy2et?file=/src/store.js

Answer 1

我让你的代码沙箱工作了，我做的主要事情是将react路由器更新到最新的react路由器dom。我不知道你为什么要使用一个带有古老路由器库的新项目。

我做的其他事情是让代码运行，是不是让应用程序声明成为一个实际的组件，而不是导致问题的静态JSX

const App = () => (
<React.StrictMode>
<Provider store={store}>
<Router>{routes}</Router>
</Provider>
</React.StrictMode>
);
ReactDOM.render(<App />, document.getElementById("root"));

我还让你的路由在声明上有点不同，因为路由不同时支持子级和组件。由于Main中不需要Route值，因此可以将其更改为路由的子级。

const routes = (
<>
<Route path="/">
<Main>
<Route path="/signup" component={Signup} />
</Main>
</Route>
</>
);

在Guest Route中，我将componentWillMount和componentWillUpdate更改为componentDidMount和componentDidUpdate，因为它们是首选选项，因为其他选项现在已弃用。

在注册中，我将其与guestRoute HOC一起导出

export default guestRoute(
connect(
null,
mapDispatchToProps
)(Signup)
);

https://codesandbox.io/s/inspiring-field-yokx4?file=/src/layout/Main.jsx