将参数传递给动态生成的反应路线

Question

我正在使用react-router-dom 并从这样的数组动态生成我的路线

路线数据

const routes = [
  {
    path: '/',
    exact: true,
    component: () => <MyComponent />
  }
}

路线生成

{routes.map((route, index) => {
  return <Route
    key={index}
    path={route.path}
    exact={route.exact}
    component={route.component}
  />
})}

渲染道具 我发现了我可以定义的 render() 道具，但即便如此，我该怎么做，因为组件在变量中

const props = this.props;
{routes.map((route, index) => {
  return <Route
    key={index}
    path={route.path}
    exact={route.exact}
    render={(props) => <??? {...props} />
  />
})}

如何在路由生成过程中传递 this.props？

Answer 1

您可以更改您的数组以仅包含组件而不是呈现组件的新功能组件，您将获得发送给它的道具：

const routes = [
  {
    path: '/',
    exact: true,
    component: MyComponent
  }
}

您可以使用任何大写的变量作为组件，因此如果您愿意，也可以这样做：

{routes.map((route, index) => {
  const Component = route.component;

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