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

【问题标题】：Using render in react router dom with a private route在带有私有路由的反应路由器 dom 中使用渲染
【发布时间】：2018-06-03 05:45:19
【问题描述】：

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

自定义路由（已验证）

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

【问题讨论】：

标签： reactjs react-router react-router-v4

【解决方案1】：

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；

【讨论】：

PrivateRoute.js

【解决方案2】：

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

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

【讨论】：

我发现当我用render=声明PrivateRoute时，浏览器会暂时显示私有组件，然后才执行重定向。但是，当我使用 'component=' 声明 PrivateRoute 时，浏览器会立即执行重定向而不显示私有组件。

【解决方案3】：

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

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

而不是使用渲染发送component prop 中的组件，例如：

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

还可以查看 react 路由器的文档，了解何时使用 component 道具以及何时使用 render 道具。如果你能改变你的protectedRoute 来处理这两种情况会更好。

【讨论】：

还没有意识到我可以使用这样的组件
是的，因为你传入的component prop 实际上是一个匿名的反应组件。

【解决方案4】：

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

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

然后将其导入并在您的已验证组件中使用，如下所示：

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

编辑：如果提供，您还可以在 Authenticated 组件中处理渲染道具：

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

【讨论】：