I'm making a online tutorial website from react.js which has course and course has some sub topic .IS there any short cut for this code which I rote

userJCzl1 0
Viewed 22

In my code, there are many imports (38 import components) and routes(38 routes) so can simplify those into a few imports and routes is there any way available...???

function App() {  return (
    <Router>
      <SideBar>
        <Routes>
               
          <Route path="/Architecture" element={<ReactJs_Architecture />} />
          <Route path="/JSX" element={<ReactJs_JSX />} />
          <Route path="/Components" element={<ReactJs_Components />} />
          <Route path="/Styling" element={<ReactJs_Styling />} />
          <Route path="/Properties" element={<ReactJs_Properties />} />
          <Route path="/EventManagement" element={<ReactJs_EventManagement />} />
          <Route path="/StateManagement" element={<ReactJs_StateManagement />} />
          <Route path="/Redux" element={<ReactJs_Redux />} />
          <Route path="/Animation" element={<ReactJs_Animation />} />
          <Route path="/Home" element={<NodeJs_Home />} />
          <Route path="/Node_Introduction" element={<Node_Introduction/>} />
          <Route path="/EnvironmentSetup" element={<NodeJs_EnvironmentSetup />} />
          <Route path="/REPLTerminal" element={<NodeJs_REPLTerminal />} />
          <Route path="/PackageManager" element={<NodeJs_PackageManager />} />
          <Route path="/Buffers" element={<NodeJs_Buffers />} />
          <Route path="/Streams" element={<NodeJs_Streams />} />
          <Route path="/WebModule" element={<NodeJs_WebModule />} />
          <Route path="/ScalingApplications" element={<NodeJs_ScalingApplications />} />
          <Route path="/Packaging" element={<NodeJs_Packaging />} />
         
          <Route path="*" element= { < not found />} />
        
        </Routes>
      </SideBar>
    </Router>
  );
}
          
export default App;
routes reactjs javascript
1 Answers

If your items are long always try to create an array and list all your routes there like this

const ROUTE_PATHS = {
  PRICING: "/pricing",
  ACTIONS: "/actions",
};

const routeItems = [
  {
    name: "Pricing",
    path: ROUTE_PATHS.PRICING,
    Component: Pricing,
  },
  {
    name: "Bulk Actions",
    path: ROUTE_PATHS.ACTIONS,
    Component: Actions,
  },
];

And now add a loop to iterate over all the routes

    <Routes>
        {routeItems.map(item => {
          const { Component } = item;
          return (
            <Route
              key={item.name}
              path={item.path}
              element={
                  <Component />
              }
            />
          );
        })}
      </Routes>

Now it made simple.

man.in.the.jukebox0
Related