在带有私有路由的反应路由器 dom 中使用渲染

Question

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

自定义路由（已验证）

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

然后在我的路线中我想要这样的东西

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

我认为您需要创建一个返回的自定义组件：

return(
  <div>
   <Main />   
   <ClientEdit />
  </div>)

然后将其导入并在您的经过身份验证的组件中使用它，如下所示：

<Authenticated
   path="/clients/:id/edit"
   component={CustomComponent}
 />

编辑：如果提供，您还可以在经过身份验证的组件中处理渲染道具：

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

Answer 2

在您的 protectedRoute 组件中，您没有接收或使用您在行中发送的 render 道具：

render={(props) => ( 
  <div>
    <Main />   
    <ClientEdit />
  </div>
)}

而不是使用 render 在 component prop 中发送组件，例如：

component={(props) => ( 
  <div>
    <Main />   
    <ClientEdit />
  </div>
)}

同时查看 React Router 的文档，了解何时使用 component prop 以及何时使用 render prop。如果您可以更改 protectedRoute 来同时处理这两个问题，那就更好了。

Answer 3

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

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

在我的路线中，我是这样使用它的：

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

Answer 4

import React from 'react';
import { Route, Redirect } from "react-router-dom";
const PeivateRoute = ({ component: component, ...rest }) => {
  return (
     <Route
        {...rest}
        render = {props => (false ? <component {...props}/> : <Redirect to="/" />)}
         />
);

};

导出默认的 PeivateRoute；

在带有私有路由的反应路由器 dom 中使用渲染

Using render in react router dom with a private route

reactjs

react-router

react-router-v4