How to use an array element as a route element?

user_17673820 0
Viewed 54

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

react-router reactjs javascript
2 Answers

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;
user_86908570

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

user_48401650
Related