[子级路线中的页面显示页面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;

以及此代码在index.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();

在索引和routes.js之间相关的重要ui路由中。我想在raectJS网站中显示页面，但不显示在侧边栏上，所以我使用了子级路线，但是它不能正常工作，有人可以帮助我吗？

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
...