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-router v3.2.1

这里是一个沙盒，它会重现错误： https://codesandbox.io/s/zealous-austin-vy2et?file=/src/store.js

Answer 1

我让您的codeandbox工作了，我要做的主要事情是将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值，因此可以将其更改为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

无法将“已连接” HOC与React路由器一起使用

1 个答案: