时间戳

首页 > 解决方案 > 无法在子路由 React JS 中显示页面

reactjs - 无法在子路由 React JS 中显示页面

问题描述

我使用了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();

在 index 和 routes.js 之间相关的材料 ui 路由中。我想在我的 raectJS 网页中显示页面但不显示在侧边栏上，所以我使用了子路由但它无法工作，任何人都可以帮助我吗？

标签： reactjsroutes

解决方案

在您的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
...

推荐阅读