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

Question

我使用了材料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网页中显示页面，但不显示在侧边栏上，所以我使用了children路由，但它无法工作，有人可以帮助我吗？

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