javascript - React Route - 从 JSON 对象中的字符串渲染路由中的组件

Question

我正在尝试与我创建的 JSON 文件中的组件名称进行比较来渲染 React 组件。例如，我想在我的 Route 组件内渲染 TestSection 组件。

这是使用“react-router-dom”提供的路由组件。

这是我尝试创建动态路线的一个例子，但我完全困惑为什么这行不通:

(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

存在一些语法错误:

• 您应该创建类似的 DynamicRoutes 组件并返回导航 map 。
• 组件:按键错误且与导航项位置 2 不同
• BrowserRouter 你应该把它放在index.js 中并包裹起来//如果你有的话，用div 来改变这段代码中的BrowserRouter 就可以了
• Route 元素用于创建路线

测试此代码，我纠正了以前的错误，它对我有用:

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;