如何使用对象而不是组件/功能从react-route-dom渲染<Route />

沃尔特

我有一个对象列表,其中有一个path,一个name和一个Reactcomponent作为属性。当我遍历对象列表,获取每个对象并渲染<Route key={indice} path={route.path} name={route.name} component={route.component}/>组件时,我收到警告:

Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.
          in Route (at DefaultLayout.js:158)
          in DefaultLayout (created by Context.Consumer)
          in Connect(DefaultLayout) (created by Route)
          in Route (at DefaultLayout.test.js:22)
          in PersistGate (at DefaultLayout.test.js:21)
          in Provider (at DefaultLayout.test.js:20)
          in Router (created by BrowserRouter)
          in BrowserRouter (at DefaultLayout.test.js:19)

我已经尝试过以route.component类似于的方式嵌套<Component />,但是这种方法在与其他组件通信时有点复杂。显然,我曾尝试将组件嵌套在箭头函数中() => (route.component),但仍然收到警告。

我尝试过的方法(“复杂”方法):

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

我希望呈现一个没有<Route />组件的接收组件的[{component: Dashboard}]

达维奇

您应该使用以下组件:

<Route
      key={index}
      path={route.path}
      exact={route.exact}
      name={route.name}
      render={props => (
           <route.component {...props} />
      )}
/>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

React-route-dom 更新 url 但不渲染组件

在 Route 之外渲染组件

基于React-Route渲染React组件

React Router 不渲染 Route 组件

使用react-router-dom(<Route>)将var从->传递到React中的功能组件

AnimatePresence 和 react-router-dom [BrowserRouter] 不是 <Route> 组件。<Routes> 的所有组件必须是 <Route> 或 <React.Fragment>

Route 不会在 React 中渲染组件

如何将组件名称从另一个组件的对象传递到React Router Dom中的Route?

将URL参数和道具传递给Route的渲染组件

Route中的渲染组件不会触发其componentDidMount

REACT 检查`Route` 的渲染方法。帮帮我TT

使用SemanticUI的React-route-dom NavLink无法正常工作

如何将组件从 React Route 渲染到与 root 不同的 div

React Router - 通过 props 将匹配传递给使用 Route::render 渲染的组件

从GetResponseEvent获取Route对象

如何在 react-route-dom v6 中处理 Route 404 页面,例如“/search/:searchText”

使用WebAPI Route属性

React Route - 无法分配给“渲染”,因为它不是变量

未在Route的渲染部分中调用函数

酶`mount`不渲染`Route`元素

RouteMapper 不是 <Route> 组件。<Routes> 的所有子组件必须是 <Route> 或 <React.Fragment>

如何使用 Typescript 从 react-router-dom 访问路由参数?例如:`/some-route/:slug`

如何在 React 的分层组件中使用 {Switch, Route}?

无法访问用作 Route 中元素的组件中的子项(react-router-dom 6.3.0)

React Router 4:如何在Route的渲染方法中等待一个承诺解决?

观看$ route.params.id不会触发Vue组件的重新渲染

React:<Route确切路径=“ /” />和<Route path =“ /” />之间的区别

React Route导致类更改

React Route不重定向