当具有这种路由结构时，它如何将道具传递给每个组件

Question

我正在为我的项目使用 coreui。因为我想在需要时为每个组件传递 props im 在 map 方法中渲染。

下面是用路由映射每个组件的代码

 render() {
    return (
      <div className="app">
        <AppHeader fixed>
          <Suspense fallback={this.loading()}>
            <DefaultHeader onLogout={(e) => this.signOut(e)} />
          </Suspense>
        </AppHeader>
        <div className="app-body">
          <AppSidebar fixed display="lg">
            <AppSidebarHeader />
            <AppSidebarForm />
            <Suspense>
              <AppSidebarNav
                navConfig={_navs}
                {...this.props}
                router={router}
              />
            </Suspense>
            <AppSidebarFooter />
            <AppSidebarMinimizer />
          </AppSidebar>
          <main className="main">
            <AppBreadcrumb appRoutes={routes} router={router} />
            <Container fluid>
              <Suspense fallback={this.loading()}>
                <Switch>
                  {routes.map((route, idx) => {
                    return route.component ? (
                      <Route
                        key={idx}
                        path={route.path}
                        exact={route.exact}
                        name={route.name}
                        render={(props) => <route.component {...props} />}
                      />
                    ) : (
                      <Redirect from="*" to="/dashboard" />
                    );
                  })}

                  <Redirect from="*" to="/dashboard" />
                </Switch>
              </Suspense>
            </Container>
          </main>
        </div>
      </div>
    );
  }
}

下面是我定义的路由文件

import React, { lazy } from "react";

const Dashboard = React.lazy(() => import("./views/Dashboard"));

const Users = lazy(() => import("./views/Users/Users"));
const User = lazy(() => import("./views/Users/User"));
const test = lazy(() => import("./views/test/test"));
const Login = lazy(() => import("./views/Pages/Login/Login"));
const Register = lazy(() => import("./views/Pages/Register/Register"));
const page404 = lazy(() => import("./views/Pages/Page404/Page404"));

// https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
const routes = [
  { path: "/", exact: true, name: "Home", component: Dashboard },
  { path: "/dashboard", name: "Dashboard", component: Dashboard },
  { path: "/login", name: "Login", component: Login },

  {
    path: "/customers/user_overview",
    name: "Users Overview",
    component: Register
  },
  { path: "/users", exact: true, name: "Users", component: Users },
  { path: "/users/:id", exact: true, name: "User Details", component: User },
  {
    path: "/customers/customers_overview",
    exact: true,
    name: "Customer Details",
    component: test
  }
];

export default routes;

我需要的是我想在需要时为每个组件传递 props 例如当我需要传递一些 props 来注册组件时我怎么能在没有这些 props 的情况下也传递给其他组件？

Answer 1

您可以添加新的属性道具，

const routes = [
 {
    path: "/customers/user_overview",
    name: "Users Overview",
    component: Register,
    props:{title:"Register me"},
  }
];

并在地图中使用它，

{routes.map((route, idx) => {
                    return route.component ? (
                      <Route
                        key={idx}
                        path={route.path}
                        exact={route.exact}
                        name={route.name}
                        render={(props) => <route.component {...props} {...route.props}/>}
                      />
                    ) : (
                      <Redirect from="*" to="/dashboard" />
                    );
                  })}

希望对您有所帮助！

当具有这种路由结构时，它如何将道具传递给每个组件

how do it pass props to each component when having this kind of structure of routing

javascript

reactjs

core-ui