CODEWITHSUNDEEP
javascriptreactjsreact-router
Roi
Roi

Reputation: 21

How to use an array element as a route element?

I am writing routes with react router:

<Route path="/" element={<Homepage />} />

I have an array with the element names:

const page = ["Hompage", "About"];

How can I use the array element as a route element?

I tried to add strings of angle brackets and use the array element but it didn't work.

const edit = () => {
for (let i=0; i<10; i++) {
    page[i]="<"+page[i]+" />"
}

Thanks

Upvotes: 2

Views: 436

Answers (2)

Drew Reese
Drew Reese

Reputation: 202706

You will need to import the actual components you want to render at some point, and then map the array to JSX.

Example:

import HomePage from '../path/to/HomePage';
import About from '../path/to/About';

const pageMap = {
  HomePage,
  About
};

...

const pages = ["Hompage", "About"];

...

const edit = () => {
  return pages.map(Page => <Page key={Page} />);
};

...

If you are wanting to map the pages to Route components, then it would be a similar process.

const pageMap = {
  HomePage: { path: "/", element: <HomePage /> },
  About: { path: "/about", element: <About /> },
};

const pages = ["Hompage", "About"];

...

pages.map(({ path, element }) => (
  <Route key={path} path={path} element={element} />
))

At this point though, you may as well use the useRoutes hook and pass your routes config to it.

Example:

import { useRoutes } from 'react-router-dom';
import HomePage from '../path/to/HomePage';
import About from '../path/to/About';

...

const routesConfig = [
  { path: "/", element: <HomePage /> },
  { path: "/about", element: <About /> }
];

...

const routes = useRoutes(routesConfig);

...

return routes;

Upvotes: 1

Mark
Mark

Reputation: 1679

You should be able to do something like this:

import Home from '../Home'
import About from '../About'


const Routes = () => {
  const pages = [{ route: '/', page: Home }, { route: '/about', page: About }]

  return (
    <Switch>
      {pages.map(({route, page: Page }) => (
        <Route path={route} element={<Page />} />
      )}
    </Switch>
  )
}

The key here is to use the imported component as the value for your page key and then you can use normal JSX component syntax as you are iterating with map

Upvotes: 0

Related Questions