Невозможно использовать «подключенный» HO C с реагирующим маршрутизатором

Question

Я делаю HO C, который я могу использовать, чтобы вошедшие в систему пользователи не посещали определенные маршруты (то, что я называю "гостевыми маршрутами"). Он будет подключен к моему магазину для доступа к состоянию пользователя loggedIn. Вот моя реализация HO C:

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

Как видите, я возвращаю "подключенный" компонент оболочки.

Вот мои маршруты и как этот HO C используется:

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.

Как я могу go о возврате допустимый компонент, который я могу использовать в своем маршруте вместо того, что возвращается connect?

РЕДАКТИРОВАТЬ: я использую реагировать v16.13.1 и реагировать маршрутизатор v3.2.1

Вот песочница, которая воспроизводит ошибку: https://codesandbox.io/s/zealous-austin-vy2et?file= / src / store. js

Answer 1

Я установил работоспособность ваших кодов и ящиков. Главное, что я сделал, это обновил реагирующий маршрутизатор до последней из реактивных маршрутизаторов. Я не уверен, почему вы используете новый проект с древней библиотекой маршрутизатора.

Другие вещи, которые я делал, были для запуска кода, я сделал объявление приложения фактическим компонентом, а не stati c JSX, который вызывает проблемы

const App = () => (
  <React.StrictMode>
    <Provider store={store}>
      <Router>{routes}</Router>
    </Provider>
  </React.StrictMode>
);

ReactDOM.render(<App />, document.getElementById("root"));

Я также сделал ваши маршруты немного отличающимися в объявлении, так как Маршрут не поддерживает ни дочерние элементы, ни компонент одновременно. Поскольку значения Маршрут в Main не нужны, его можно изменить на дочерний для маршрута.

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

В гостевом маршруте я изменил componentWillMount и componentWillUpdate на componentDidMount и componentDidUpdate, так как они являются предпочтительными вариантами, так как остальные теперь устарели.

При регистрации я экспортировал его с guestRoute HO C вокруг него

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

https://codesandbox.io/s/inspiring-field-yokx4?file= / SRC / макет / Main.jsx