javascript - 将参数传递给动态生成的 react 路线

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

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

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

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

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