поддержка рендеринга реквизита реагирует маршрутизатор в маршрут HOC

Question

Я пишу HOC для общественного маршрута и частного маршрута. Если маршрут является закрытым, и пользователь проходит аутентификацию, то разрешите ему / ей войти на эту страницу, иначе перенаправьте на компонент входа. Если маршрут является общедоступным, и пользователь не аутентифицирован, то покажите страницу, а также покажите страницу входа, если пользователь не аутентифицирован, но пользователь прошел аутентификацию и все еще переходит на страницу входа, а затем перенаправляет пользователя на корневую страницу. Это работает нормально. Но если я использую рендер вместо компонента, то он не работает. Я могу заставить его работать, только если я пропущу компонент из реквизита, называемого компонентом реагирующего маршрутизатора.

Как я могу заставить его работать, если пользователь рендерит реквизит?

Вот мой код

<Switch>
  <PrivateRoute
    exact
    path="/"
    render={() => <Home name="something" />} {/* this does not work */}
  />
  <PrivateRoute exact path="/demo" component={Demo} />
  <PublicRoute restricted={true} path="/auth" component={Authentication} />
</Switch>

PublicRoute.js

const PublicRoute = ({component: Component, restricted, ...rest}) => {
  return (
    <Route
      {...rest}
      render={props =>
        isLogin() && restricted ? <Redirect to="/" /> : <Component {...props} />
      }
    />
  )
}

PrivateRoute.js

const PrivateRoute = ({component: Component, ...rest}) => {
  return (
    <Route
      {...rest}
      render={props =>
        isLogin() ? <Component {...props} /> : <Redirect to="/auth/login" />
      }
    />
  )
}

Также, если есть какие-то дополнительные улучшения, пожалуйста, предложите мне.

Answer 1

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

. Когда вы изменяете ее, как функция ниже, она будет работать.Он также извлекает render реквизит и, если это функция, будет использовать ее вместо component реквизита.

const PrivateRoute = ({component: Component, render, ...rest}) => {
    const renderContent = props => {
        if (!fakeAuth.isAuthenticated) {
            return (
                <Redirect
                    to={{
                        pathname: "/login",
                        state: { from: props.location }
                    }}
                />
            )
        }
        return (typeof render === 'function') ? render(props) : <Component {...props} />
    }

    return (
        <Route {...rest} render={renderContent} />
    );
}