reactjs - 在 React router dom 中使用渲染和私有(private)路由

Question

我尝试使用 React router dom v4 在私有(private)路由中渲染两个组件。使用普通路由是可能的，但使用自定义路由时似乎并非如此。我收到以下错误:“警告:React.createElement:类型无效 - 需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)，但得到:未定义。您可能忘记从定义的文件中导出组件，或者您可能混淆了默认导入和命名导入。”

自定义路由(已验证)

return (
      <Route
        {...rest}
        render={props =>
          this.currentUser()
            ? <Component currentUser={this.currentUser} {...props} />
            : <Redirect
                to={{
                  pathname: '/auth/login',
                  state: { from: props.location }
                }}
              />
        }
      />
    )

然后在我的 route 我想要这样的东西

return (
      <div>
        <Switch location={isModal ? this.prevLocation : location}>
          <Authenticated path="/" exact component={Main} />
          <Route path="/auth/register" exact component={Register} />
          <Route path="/auth/login" exact component={Login} />
          <Authenticated
            path="/clients/:id/edit"
            render={(props) => ( // Not working as expected. Works fine using Route instead of Authenticated
              <div>
                <Main />   
                <ClientEdit />
              </div>
            )}
          />
        </Switch>
        {isModal ?
          <Authenticated
            path='/clients/new'
            component={ClientNew}
          />
        : null}
        {isModal ?
          <Authenticated
            path='/clients/:id/edit'
            component={ClientEdit}
          />
        : null}
      </div>
    );

Answer 1

我有点晚了，但对于仍然需要这个的人来说，我发现这对我有用。

export function PrivateRoute({ component: Component = null, render: Render = null, ...rest }) {
  const authService = new AuthService();

  return (
    <Route
      {...rest}
      render={props =>
        authService.isAuthenticated ? (
          Render ? (
            Render(props)
          ) : Component ? (
            <Component {...props} />
          ) : null
        ) : (
          <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
        )
      }
    />
  );
}

在我的 route ，我像这样使用它:

<PrivateRoute
    path="/some-route/edit"
    render={props => <MyComponent {...props} isAwesome={true} />} />