用動態數組反應路由器

Question

我想根據我的頁面列表創建一個動態路由器。 但我無法定義我的組件。 鏈接路徑和組件名稱即將出現在我的列表中。 有什么解決辦法嗎？

import Home from "../pages/Home";

import BannerManagement from "../pages/BannerManagement";

我在 App.js 中的頁面列表

const pageList= [
  {
    path: "home",
    element: "Home",
  },
  {
    path: "BannerManagement",
    element: "BannerManagement",
  }
];

在 App.js 中

ReactDOM.render(
        <Router>
            <BrowserRouter>
              {
                pageList.map(page=>{
                return (<Route exact path={"/"+page.path} component={page.element}/>)
              })
            }
            </BrowserRouter>
      </Router>,document.getElementById('root'));

Answer 1

App.js中的pageList數組應該存儲組件引用而不是組件名稱的字符串。

將路由呈現到Switch組件中，以便路由完全匹配，並確保路由在pageList數組中以與路徑特異性相反的順序指定，例如， "/foo/bar"列在"/foo"之前。 這允許在回退到不太具體的路由之前匹配更具體的路由。 這有效地消除了在任何地方指定exact道具的需要。

您還只需要一個路由器組件即可為整個應用程序提供路由上下文。

例子：

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

import Home from "../pages/Home";
import BannerManagement from "../pages/BannerManagement";
...

const pageList= [
  {
    path: "/home",
    element: Home, // <-- component reference
  },
  {
    path: "/BannerManagement",
    element: BannerManagement, // <-- component reference
  },
  ...
];

ReactDOM.render(
  <BrowserRouter>
    <Switch>
      {pageList.map(page => (
        <Route path={page.path} component={page.element} />
      ))}
    </Switch>
  </BrowserRouter>,
  document.getElementById('root')
);