无法将"connected“HOC与react路由器一起使用
我正在做一个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-router v3.2.1
下面是一个再现错误的沙箱：https://codesandbox.io/s/zealous-austin-vy2et?file=/src/store.js
回答 1
Stack Overflow用户
发布于 2020-04-26 04:00:07
我让你的codesandbox正常工作了，我做的主要事情是把react-router更新到react-router-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>
</>
);在访客路由中，我将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
https://stackoverflow.com/questions/61420600
复制
相似问题
如何将HoC与React Native一起使用
将TypeScript与React HOC、React.lazy和forwarRef一起使用
将Apollo GraphQL HOC模式与现有的HOC一起使用
将redux与不带connect HOC的react-hooks一起使用
使用HOC的React路由器渲染方法
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
