I am trying to return my routes from an object using loop. I'm following the instruction from here and here . It's working well, but when i have another single route it won't showing the page on browser, and there's no error. Those anyone helping me to fix my code ? Here is my code:
export function RouteStudent(props) {
const routeList = [
{
"ID": "1",
"Name": "Profile",
"Description": "",
"PathURI": "/profile",
"Slug": "Profile",
"URI": "/",
"Child": []
},
{
"ID": "2",
"Name": "Product",
"Description": "",
"PathURI": "/product",
"Slug": "Product",
"URI": "/",
"Child": [
{
"ID": "3",
"Name": "Item A",
"Description": "",
"PathURI": "/product/item-a",
"Slug": "ItemA",
"URI": "/item-a"
},
{
"ID": "4",
"Name": "Item B",
"Description": "",
"PathURI": "/product/item-b",
"Slug": "ItemB",
"URI": "/item-b"
}
]
},
{
"ID": "5",
"Name": "Sales",
"Description": "",
"PathURI": "/sales",
"Slug": "Sales",
"URI": "/",
"Child": [
{
"ID": "6",
"Name": "Sale A",
"Description": "",
"PathURI": "/sales/sale-a",
"Slug": "SaleA",
"URI": "/saleA"
},
{
"ID": "7",
"Name": "Sale B",
"Description": "",
"PathURI": "/sales/sale-b",
"Slug": "SaleB",
"URI": "/sale-b"
}
]
},
{
"ID": "8",
"Name": "Billing",
"Description": "",
"PathURI": "/billing",
"Slug": "Billing",
"URI": "/",
"Child": []
},,
{
"ID": "9",
"Name": "Regulation",
"Description": "",
"PathURI": "/regulation",
"Slug": "Regulation",
"URI": "/",
"Child": []
},
];
const COMPONENT_MAP = {
'Dashboard': Dashboard,
'Profile':Profile,
'Product':Product,
'ItemA':ItemA,
'ItemB':ItemB,
'Sales':Sales,
'SaleA':SaleA,
'SaleB':SaleB,
'Billing':Billing,
'Regulation':Regulation,
}
console.log(routeList);
return (
<Suspense fallback={<h3>Loading..</h3>}>
<Switch>
{ <Redirect exact from="/" to="/dashboard"/> }
<Route path="/dashboard" component={Dashboard} exact/>
<Route path="/profile" component={Profile} />
{(Object.keys(routeList).length > 0) ?(
routeList.map((v)=>
(( Object.keys(v.Child).length > 0) ? (
<Route
path={v.PathURI}
render={({ match: { url } }) => (
<>
<Route path={`${url}/`} component={COMPONENT_MAP[v.Slug]} exact />
{v.Child.map((k)=>
<Route path={`${url+k.URI}`} component={COMPONENT_MAP[k.Slug]} />
)}
</>
)}
/>
) : (
<Route path={v.PathURI} component={COMPONENT_MAP[v.Slug]} />
) )
)
) : '' }
<Route component={PageNotFound}/>
</Switch>
</Suspense>
)
}
export default RouteStudent;
When i typing the path uri on browser, route Dashboard, Profile, Product (and the child), Sales(and the child) it works well, i mean showing the page. But when accessing route Billing and Regulation it's not working, show the blank (suck as doesn't have page). But when i write like this:
<Route path="/billing" component={Billing} />
it show the page.
Can anyone help what's wrong with my code?
routeListarray, but I assume that was a typo in your question.