Блог

Не уверен, правильно ли я это понимаю. Но я хотел бы динамически создавать маршруты из массивов и объектов и не кодировать их по отдельности. Я создал это приложение, чтобы продемонстрировать проблему.

Я вижу, что маршруты создаются и переключаются, но по какой-то причине ничего не отображается. Спасибо за любые отзывы по этому поводу.

 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;

 

Возможно, это не тот решатель проблем, который вам нужен, но этот первый маршрут с path=’/’ всегда будет срабатывать, поэтому его следует изменить на точный путь или переместить в низ. Также возможно, что вы можете перейти к www.website.com/apple , но маршрут должен был бы быть www.website.com/Apple