как он передает реквизиты каждому компоненту при наличии такой структуры маршрутизации - PullRequest
Новая
       9

как он передает реквизиты каждому компоненту при наличии такой структуры маршрутизации

0 голосов
/ 20 сентября 2019

Я использую Coreui для моего проекта.в этом я хочу передать реквизиты для каждого компонента, находящегося в методе карты, когда это необходимо.

ниже приведен код для сопоставления каждого компонента с маршрутами 

 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;

что мне нужно, так это то, что я хочу передать реквизиты для каждого компонента, когда мне нужно, например, когда мне нужно передать несколько реквизитов, чтобы зарегистрировать компонент, как я могу пройти без этих реквизитов, идущих и на другие компоненты?

1 Ответ

0 голосов
/ 20 сентября 2019

Вы можете добавить новое свойство для реквизита, 

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

Надеюсь, это поможет!

...