在带有私有路由的反应路由器 dom 中使用渲染 [英] Using render in react router dom with a private route

问题描述

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

自定义路由(已认证)

返回 (<路线{...休息}渲染={道具=>this.currentUser()?<组件 currentUser={this.currentUser} {...props}/>: <重定向到={{路径名: '/auth/login',状态:{来自:props.location}}}/>}/>)

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

返回 (<div><切换位置={isModal ?this.prevLocation:位置}><Authenticated path="/" 精确组件={Main}/><Route path="/auth/register" 精确组件={Register}/><Route path="/auth/login" 精确组件={Login}/><已认证路径="/clients/:id/edit"渲染={(道具)=>(//没有按预期工作.使用 Route 而不是 Authenticated 工作正常<div><主要/><客户编辑/>

)}/></开关>{是模态?<已认证路径='/客户/新'组件={ClientNew}/>: 空值}{是模态?<已认证路径='/clients/:id/edit'组件={ClientEdit}/>: 空值}

);

解决方案

在您的 protectedRoute 组件中，您没有接收或使用您在行中发送的 render 属性:

render={(props) =>(<div><主要/><客户编辑/>

)}

而不是使用 render 发送 component 属性中的组件，例如:

component={(props) =>(<div><主要/><客户编辑/>

)}

还要查看 react router 的文档以了解何时使用 component 道具以及何时使用 render 道具.如果您可以更改您的 protectedRoute 以处理两者，那就更好了.

Im trying to render two components within a private route using react router dom v4. This is possible using a normal Route but it does not seem to be the case when using a custom Route. I get the following error: "Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. "

Custom route (Authenticated)

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

Then in my routes i want something like this

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

解决方案

In your protectedRoute component, you are not receiving or utilizing render prop which you are sending in the line:

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

instead of using render send the component in component prop like :

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

Also check react router's docs to see when to use component prop and when to use render prop. It would be much better if you can change your protectedRoute to handle both.

这篇关于在带有私有路由的反应路由器 dom 中使用渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！