Looping through route maps in React Main.js

Question

I am using react-router-dom for my blogs. My Main.js looks like

    const Main = () => {
      return (
        <Switch> {/* The Switch decides which component to show based on the current URL.*/}
          <Route exact path='/' component={Home}></Route>
          <Route exact path='/1' component={art1}></Route>
          <Route exact path='/2' component={art2}></Route>
          {/* <Route exact path='/3' component={art3}></Route> */}
        </Switch>
      );
    }

and I want to make it understand automatically as component = "art"+path. How should I go about it?

Answer 1

UPDATED ANSWER

Code has been further reduced by using dynamic imports with React.lazy. (See initial answer further below for original code)

import { lazy, Suspense } from "react";
import { Switch, Route } from "react-router-dom";

const Main = () => {
  return (
    <Switch> {/* The Switch decides which component to show based on the current URL.*/}
      <Route exact path='/' component={Home}></Route>
      <Suspense fallback="">
        {
          [...Array(3).keys()].map((i) => {
            const artComp = lazy(() => import(`./components/Art${i+1}`));
            return (<Route exact path={`/${i+1}`} key={i+1} component={artComp}></Route>);
          })
        }
      </Suspense>
    </Switch>
  );
}

View updated demo on codesandbox

What the code does:

1. Create a Suspense component to wrap the Routes which components will be dynamically generated via React.lazy.

2. Inside the map function:

• Generate component dynamically

• Set the Route's component property to the above component

Explanation:

With React.lazy, you can dynamically import a module and render it into a regular component.

React.lazy takes a function that calls a dynamic import. This returns a promise which resolves to the imported module.

Note: the components in the imported modules should be default exports, otherwise the promise resolves to undefined.

Lazy loading means loading only what is currently needed. As the components will be lazy components, they'll be loaded only when first rendered (i.e. when you click on the corresponding link for the first time).

Notes:

• No fallback has been specified for the Suspense in the answer.

  With a Suspense, you can specify a fallback content (e.g. a loading indicator) to render while waiting for the lazy component to load.

  The fallback content can be an HTML string, e.g.

  fallback={<div>Loading...</div>}

  or a component, e.g.:

  fallback={<LoadingIndicator/>}

• (21.08.21) React.lazy and Suspense are not yet available for server-side rendering. If you want to do this in a server-rendered app, React recommends Loadable Components.

For more information, view the React documentation about React.lazy.

INITIAL ANSWER

How about this?

import Art1 from '...';
import Art2 from '...';
import Art3 from '...';
// and so on

const Main = () => {

  const artComponents = {
    art1: Art1,
    art2: Art2,
    art3: Art3,
    // and so on
  };

  return (
    <Switch> {/* The Switch decides which component to show based on the current URL.*/}
      <Route exact path='/' component={Home}></Route>
      {
        [...Array(3).keys()].map((i) => {
          const artComp = artComponents[`art${i+1}`];
          return (<Route exact path={`/${i+1}`} key={i+1} component={artComp}></Route>)
        })
      }
    </Switch>
  );
}

What this does:

1. Import "art"+path components into file

   Note: component name should start with a capital letter.

2. Store imported components in an object

3. Create an empty array with 3 empty slots

   Note: replace 3 by the number of "art"+path routes you need to generate.

4. Access the array's indexes

5. Create an array with those indexes

6. For each array index:

7. Compute the required "art"+path based on the index, and get the matching component from the object in step 2

8. Return a <Route>, with the path set based on the index and the component set to the matching component above

   E.g. for index 0:

   • artComp will be artComponents[1] a.k.a. Art1
   • path will be /1
   • component will be Art1

Answer 2

import { useRouteMatch } from 'react-router-dom';
let { path} = useRouteMatch();

after getting the path remove the "/" from the path in the component concatenation

<Route exact path={path} component={art${path.substring(1)}}>

Answer 3

What you want to do isn't possible because you cannot create a variable name from a string in Javascript. I assume that you have something like

art1 = () => {
    // return some JSX
}

and

art2 = () => {
    // return some JSX
}

When you have variable names like this that only differ in a number, then you are almost certainly doing something wrong.