Question

我正在为公共路线和私人路线编写HOC。如果路由是私有的并且用户已通过身份验证，则让他/她输入该页面，否则将重定向到登录组件。如果路由是公用的，并且用户未通过身份验证，则显示该页面，如果用户未通过身份验证但用户已通过身份验证并且仍转到登录页面，则还显示登录页面，然后将用户重定向到根页面。一切正常。但是，如果我使用渲染器而不是组件，则它不起作用。仅当我传递来自称为react-router的props的props中的组件时，我才能使其工作。

如果用户用户呈现道具，如何使它工作？

这是我的代码

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

支持路线hoc

1 个答案: