React：路由在循环内部不起作用

Question

为什么这不起作用？

<Provider store={ store }>
   <BrowserRouter>
       <Switch>
          {routes && routes.map(
              (config, i) => <PrivateRoute key={ `route-render-${ i }` } config={ config } />
          )}
       </Switch>
   </BrowserRouter>
</Provider>

但是如果我将 PrivateRoute 更改为 Route 组件的内容将按预期工作。

这是我的 PrivateRoute.js

import React, { Component } from 'react'
import { Route } from 'react-router-dom'

class PrivateRoute extends Component {
    render() {
        const { config: { access, roles, ...rest } } = this.props

        return (
            <Route { ...rest } />
        )
    }
}

export default PrivateRoute

这是 routes 的样子

import * as shared from '../modules/shared/pages'

export const routes = [
    {
        path: '/',
        roles: [],
        access: [],
        exact: true,
        name: 'Login',
        component: shared.Login
    },
    {
        name: 'PageNotFound',
        component: shared.PageNotFound
    }
]

Answer 1

PrivateRoute需要有path、exact、component、render props，所有普通路由props。

所以你可以做的是将这些道具与附加配置一起传递，例如

<PrivateRoute path={config.path} component={config.component} config={config} />

React：路由在循环内部不起作用

React: Route is not working inside of loop

javascript

reactjs

react-router-dom