React Route - рендеринг компонента в маршруте из строки в JSON объекте

Question

Я пытаюсь отобразить компоненты React по сравнению с именами компонентов в файле JSON, который я создал. Например, я хочу визуализировать компонент TestSection внутри компонента моего маршрута.

Используются компоненты маршрутизации, предоставляемые «act-router-dom ».

Вот пример того, как я пытался создать динамические c маршруты и был совершенно сбит с толку, почему это не сработало:

(DynamicNavigaitonSwitcher. js)

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

navigation = [
    ["Explore", "/", "Explore", false],
    ["Profile", "/profile/", "TestSection", false], 
    ["Messages", "/messages/", "TestSection", false], 
    ["Listings", "/listings/", "TestSection", false], 
    ["Settings", "/settings/","TestSection", false],
    ["Login", "/login/","TestSection", false],
    ["Sign-up", "/signup/", "TestSection", false]
]

const Explore = () => {
  return (
      <div>
          <h1>Explore !!</h1>
      </div>
  )
}

const TestSection = () => {
  return (
      <p>Hey</p>
  )
}

const Components = {
  testsection: TestSection,
  explore: Explore
};

const DynamicRoutes = navigation.map((navItem) => {
    return (
            <Route path={navItem[1]} key={navItem[0]} name={navItem[0]} component={Components[navItem[2]]}/>
        )
  }
);

const DynamicNavigationSwitcher = () => {
  return (
    <div>
      <Switch>
            {DynamicRoutes}
      </Switch>
    </div>
  )
}

export default DynamicNavigationSwitcher;

Answer 1

Есть некоторые синтаксические ошибки: - DinamycRoutes, который вы должны создать как компонент и вернуть карту навигации. - Компоненты: ключи неверны и отличаются от позиции элемента навигации 2. - BrowserRouter, который вы должны поместить и заключить в индекс. js вокруг // если он у вас есть, измените BrowserRouter в этом коде на div и все в порядке - Направьте его элемент на создайте маршрут

Протестируйте этот код, я исправляю предыдущие ошибки, и он работал для меня:

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

const navigation = [
  ["Explore", "/", "explore", false],
  ["Profile", "/profile/", "testsection", false],
  ["Messages", "/messages/", "testsection", false],
  ["Listings", "/listings/", "testsection", false],
  ["Settings", "/settings/", "testsection", false],
  ["Login", "/login/", "testsection", false],
  ["Sign-up", "/signup/", "testsection", false]
];

const Explore = () => {
  return (
    <div>
      <h1>Explore !!</h1>
    </div>
  );
};

const TestSection = () => {
  return <p>Hey</p>;
};

const Components = {
  testsection: TestSection,
  explore: Explore
};

const DynamicRoutes = () => {
  return navigation.map(navItem => {
    return (
      <Route
        path={navItem[1]}
        key={navItem[0]}
        name={navItem[0]}
        component={Components[navItem[2]]}
      />
    );
  });
};

const DynamicNavigationSwitcher = () => {
  return (
    <BrowserRouter>
      <Switch>
        <DynamicRoutes />
      </Switch>
    </BrowserRouter>
  );
};

export default DynamicNavigationSwitcher;