How can I map path from API into the React Router?

I am planning to map the path that I got from the API. It will be set into the routeList. Then I want to map into one of the children for my "/app" route.

const [routeList, setRouteList] = useState([]);
useEffect(() => {
  Promise.all([
    axios.get("http://localhost:5000/rights"),
    axios.get("http://localhost:5000/children")
  ])
    .then((res) => {
      setRouteList([...res[0].data, ...res[1].data]);
    });
}, []);

const element = useRoutes([
  {
    path: "/login",
    element: LazyLoad("login/Login"),
  },
  {
    path: "/app",
    element: <AuthComponent> 
   {LazyLoad("sandbox/Sandbox")}</AuthComponent>,
      children: [
        {
          path: "",
          element: <Redirect to="/app/home" />,
        },
        routeList.map((item) => {
          `path: ${item.key}, element: 
${LocalRouterMapping[item.key]}`;
        }),
        {
          path: "*",
          element: 
    LazyLoad("noPermission/NoPermission"),
          },
        ],
     },
    ]);

But I get an error for doing this

routeList.map((item) => {
  `path: ${item.key}, element: ${LocalRouterMapping[item.key]}`;
}),

The error from the command prompt is Line 40:11: Expected an assignment or function call and instead saw an expression no-unused-expressions.

I tried to change the format but still not working.

I have another issue my element needed to be wrapped in LazyLoad function to use React.Suspence. May I know how can I do it?

const LazyLoad = (path) => {
const Comp = React.lazy(() => 
import(`../views/${path}`));
return (
<React.Suspense fallback={<>Loading...</>}>
<Comp />
</React.Suspense>
);
};

And here is how I do it but the path with the element is not created. I will just always redirect to the path: "*"

      routeList.map((item) => ({
path: item.key,
element: LazyLoad(`${LocalRouterMapping[item.key]}`),
})),

Here's my LocalRouterMapping

const LocalRouterMapping = {
"/home": "dashboard/Dashboard",
"/user-manage/list": "user-manage/UserList",
"/access-manage/access/list": "access-manage/AccessList",
"/access-manage/role/list": "access-manage/RoleList",
"/news-manage/add": "inventory/CreateInventory",
"/news-manage/draft": "inventory/InventoryDraft",
"/news-manage/category": "inventory/InventoryCategory",
"/audit-manage/audit": "audit/AuditInventory",
"/audit-manage/list": "audit/AuditList",
};

These are the data from axios

Here's my whole code

import React, { useEffect, useState } from "react";
import { useRoutes } from "react-router-dom";
import Redirect from "../components/Redirect";
import axios from "axios";
const LocalRouterMapping = {
"/home": "dashboard/Dashboard",
"/user-manage/list": "user-manage/UserList",
"/access-manage/access/list": "access-manage/AccessList",
"/access-manage/role/list": "access-manage/RoleList",
"/news-manage/add": "inventory/CreateInventory",
"/news-manage/draft": "inventory/InventoryDraft",
"/news-manage/category": "inventory/InventoryCategory",
"/audit-manage/audit": "audit/AuditInventory",
"/audit-manage/list": "audit/AuditList",};
export default function IndexRouter() {
const [routeList, setRouteList] = useState([]);
useEffect(() => {Promise.all([axios.get("http://localhost:5000/rights"), axios.get("http://localhost:5000/children")]).then((res) => {
const combinedRoutes = [...res[0].data, ...res[1].data];
setRouteList(combinedRoutes.filter((item) => LocalRouterMapping[item.key]));
});
}, []);
const element = useRoutes([
{
path: "/login",
element: LazyLoad("login/Login"),
},
{
path: "/app",
element: <AuthComponent> {LazyLoad("sandbox/Sandbox")} </AuthComponent>,
children: [
{
path: "",
element: <Redirect to="/app/home" />,
},
routeList.map((item) => ({
path: item.key.slice(1),
element: <AuthComponent>{LazyLoad(LocalRouterMapping[item.key])}</AuthComponent>,
})),
{
path: "*",
element: LazyLoad("noPermission/NoPermission"),
},
],
},
{
path: "/dashboard",
element: <AuthComponent>{LazyLoad("dashboard/Dashboard")}</AuthComponent>,
},
{
path: "/product",
element: <AuthComponent> 
{LazyLoad("dashboard/Dashboard")} 
</AuthComponent>,
},
{
path: "/",
element: <Redirect to="/app" />,
},
{
path: "*",
element: LazyLoad("notFound/NotFound"),
},
]);
return element;
}
function AuthComponent({ children }) {
const isLogin = localStorage.getItem("token");
return isLogin ? children : <Redirect to="/login" />;
}
const LazyLoad = (path) => {
const Comp = React.lazy(() => import(`../views/${path}`));
return (
<React.Suspense fallback={<>Loading...</>}>
<Comp />
</React.Suspense>
);
};

You are mapping to a string value using string templating, but then also fail to return a mapped value. You should map to a RouteObject object instead.

Example:

routeList.map(({ key }) => ({
  path: key,
  element: LazyLoad(LocalRouterMapping[key]),
})),

Complete code:

const element = useRoutes([
  {
    path: "/login",
    element: LazyLoad("login/Login"),
  },
  {
    path: "/app",
    element: <AuthComponent>{LazyLoad("sandbox/Sandbox")}</AuthComponent>,
    children: [
      {
        index: true,
        element: <Redirect to="/app/home" />,
      },
      routeList
        // Ensure there is component mapping
        .filter(item => LocalRouterMapping[item.key])
        // Map to RouteObject properties
        .map((item) => ({
          path: item.key,
          element: LazyLoad(LocalRouterMapping[item.key]),
        })),
      {
        path: "*",
        element: LazyLoad("noPermission/NoPermission"),
      },
    ],
  },
]);

I found the solution by using Route component instead of using the useRoute.

Here's my source code using the same mapping style.

const LocalRouterMapping = {
"/home": "dashboard/Dashboard",
"/user-manage/list": "user-manage/UserList",
"/access-manage/access/list": "access-manage/AccessList",
"/access-manage/role/list": "access-manage/RoleList",
"/inventory-manage/add": "inventory/CreateInventory",
"/inventory-manage/list": "inventory/InventoryList",
"/inventory-manage/preview/:id": "inventory/InventoryDetails",
"/inventory-manage/update/:id": "inventory/InventoryUpdate",
"/inventory-manage/category": "inventory/InventoryCategory",
};
<Routes>
<Route path="/login" element={LazyLoad("login/Login")} />
<Route path="/app" element={LazyLoad("sandbox/Sandbox")}>
<Route path="" element={<Navigate to={"home"} />} />
<Route path="*" element={<AuthComponent>{LazyLoad("noPermission/NoPermission")}</AuthComponent>} />
{routeList.map((item) => {
if (checkPagePermission(item) && checkUserPermission(item)) {
return (
<Route
path={item.key.slice(1)}
key={item.key.slice(1)}
element={<AuthComponent>{LazyLoad(LocalRouterMapping[item.key])}</AuthComponent>}
/>
);
}
return <Route path="*" key={item.key.slice(1)} element={<AuthComponent>{LazyLoad("noPermission/NoPermission")}</AuthComponent>} />;
})}
</Route>
<Route path="/" element={<Navigate to={"/app"} />} />
<Route path="*" element={LazyLoad("notFound/NotFound")} />
</Routes>