не могу показать страницу в детском маршруте React JS

Question

Я использовал шаблон Material-ui React JS, и все меню на боковой панели должны быть включены в dashboardRoute. но у меня есть страница, которую я не могу показать на боковой панели, а только отображаю страницу, используя

, это мой код в Routes. js

            import Dashboard from "@material-ui/icons/Dashboard";
            import Person from "@material-ui/icons/Person";
            import Time from "@material-ui/icons/AccessTime";
            import ListIcon from '@material-ui/icons/List';

            // core components/views for Admin layout
            import DashboardPage from "views/Dashboard/Dashboard";
            import DetailMerchant from "views/DetailMerchant";
            import ListMerchant from "views/ListMerchant";
            import ListPerson from "views/ListPerson";
            import Logout from "views/Logout/Logout"

            const dashboardRoutes = [
              {
                path: '/dashboard',
                name: "Dashboard",
                icon: Dashboard,
                component: DashboardPage,
                layout: "/admin"
              },
              {
                path: "",
                name: "List Person",
                icon: ListIcon,
                component: ListPerson,
                layout: "/listperson"
              },
              {
                path: "",
                name: "List Merchant",
                icon: Time,
                component: ListMerchant,
                layout: "/listmerchant",
                children: [
                  { //i cant display this page with children route
                  path: "",
                  name: "Detail Merchant",
                  icon: Time,
                  component: DetailMerchant,
                  layout: "/detailmerchant"
                  },
                ]
              },
              {
                path: "",
                name: "Logout",
                icon: Person,
                component: Logout,
                layout: "/logout"
              }

            ];

            export default dashboardRoutes;

и этот код в индексе. js

          import React from "react";
          import ReactDOM from "react-dom";
          import { createBrowserHistory } from "history";
          import { Router, Route, Switch, Redirect } from "react-router-dom";

          // core components
          import Dashboard from "layouts/Dashboard.js";
          import ListMerchant from "layouts/ListMerchant.js";
          import ListPerson from "layouts/ListPerson.js";
          import DetailMerchant from "layouts/DetailMerchant.js";
          import "assets/css/material-dashboard-react.css?v=1.8.0";

          const hist = createBrowserHistory();

          ReactDOM.render(
            <Router history={hist} basename={'http://'}>
              <Switch>
                <Route path="/dashboard" component={Dashboard} />
                <Route path="/logout" component={Logout} />
                <Route path="/listmerchant" component={ListMerchant} />
                <Route path="/listperson" component={ListPerson}/>
                <Route exact path="/detailmerchant" component={DetailMerchant}/>
              </Switch>
            </Router>,
            document.getElementById("root")
          ); 

          registerServiceWorker();

в материальных маршрутах пользовательского интерфейса, связанных между индексом и маршрутами. js. я хочу отобразить страницу в моей raect JS сети, но не показывать на боковой панели, поэтому я использовал дочерние маршруты, но она не может работать, кто-нибудь может мне помочь?

Answer 1

В вашем ListMerchant компоненте укажите ваши дочерние маршруты.

Как это

const ListMerchant = (props) => {
    return (
        <div>
            <Route exact path="/detailMerchant" component={DetailMerchant} />
        </div>
    )
};
export default ListMerchant;

Маршруты

...
<Route path="/listmerchant/detailmerchant" component={DetailMerchant}/> 
<Route path="/listmerchant" component={ListMerchant} /> // make sure to place this after /listmerchant/detailmerchant route. Or use exact for /listmerchant route
...