reactjs - Issues dynamically building routes from mapping an object in React Router

Question

Not sure if I understand this correctly. But I would like to build routes from arrays and objects dynamically and not have to code them individually. I made this App to demonstrate the issue.

I can see the routes are being created and switching but nothing is being rendered for some reason. Thanks for any feedback on this.

---

import React from "react";
import { Switch, Route, Link, BrowserRouter as Router } from "react-router-dom";

const Style = {
  bg: {
    background: "cyan",
    width: "100vw",
    height: "100vh",
    display: "flex",
    justifyContent: "center",
    alignItems: "center"
  },
  container: {
    background: "white",
    width: "70vw",
    height: "60vh",
    borderRadius: "5vh",
    overflow: "hidden"
  },
  nav: {
    background: "gold",
    width: "100%",
    height: "6vh",
    display: "flex",
    justifyContent: "space-evenly",
    alignItems: "center"
  },
  link: { textDecoration: "none" },
  content: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center"
  },
  page: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    background: "rgb(240,200,160)",
    borderRadius: "10vh",
    width: "50vw",
    height: "30vh",
    padding: "5vh"
  }
};

//Components
const Apple = () => {
  return (
    <dl style={Style.page}>
      <dt>Apple</dt>
      <dd>
        the usually round, red or yellow, edible fruit of a small tree, Malus
        sylvestris, of the rose family.
      </dd>
    </dl>
  );
};

const Orange = () => {
  return (
    <dl style={Style.page}>
      <dt>Orange</dt>
      <dd>a globose, reddish-yellow, bitter or sweet, edible citrus fruit.</dd>
    </dl>
  );
};

const Lemon = () => {
  return (
    <dl style={Style.page}>
      <dt>Lemon</dt>
      <dd></dd>
    </dl>
  );
};

const Watermelon = () => {
  return (
    <dl style={Style.page}>
      <dt>Watermelon</dt>
      <dd></dd>
    </dl>
  );
};

const Grape = () => {
  return (
    <dl style={Style.page}>
      <dt>Grape</dt>
      <dd></dd>
    </dl>
  );
};

const Pineapple = () => {
  return (
    <dl style={Style.page}>
      <dt>Pineapple</dt>
      <dd></dd>
    </dl>
  );
};

const Strawberry = () => {
  return (
    <dl style={Style.page}>
      <dt>Strawberry</dt>
      <dd></dd>
    </dl>
  );
};

const Bannana = () => {
  return (
    <dl style={Style.page}>
      <dt>Bannana</dt>
      <dd></dd>
    </dl>
  );
};

const pageList = [
  { icon: "??", route: "Apple" },
  { icon: "??", route: "Orange" },
  { icon: "??", route: "Lemon" },
  { icon: "??", route: "Watermelon" },
  { icon: "??", route: "Grape" },
  { icon: "??", route: "Pineapple" },
  { icon: "??", route: "Strawberry" },
  { icon: "??", route: "Bannana" }
];

const App= () => {
  return (
    <Router>
      <div style={Style.bg}>
        <div style={Style.container}>
          <nav style={Style.nav}>
            {pageList.map((page) => (
              <Link to={`/${page.route}`} style={Style.link}>
                {page.icon}
              </Link>
            ))}
          </nav>
          <section style={Style.content}>
            <Switch>
              <Route path="/" component={Apple} />
              {pageList.map((page) => (
                <Route path={`/${page.route}`} component={page.route} />
              ))}
            </Switch>
          </section>
        </div>
      </div>
    </Router>
  );
};

export default App;

question from:https://stackoverflow.com/questions/65832972/issues-dynamically-building-routes-from-mapping-an-object-in-react-router

Answer 1

It might not be the problem solver you need but that first route with the path='/' will always fire, so it should be changed to exact path or moved to the bottom. Also its possible you might be navigating to www.website.com/apple, but the route would need to be www.website.com/Apple