javascript - 如何将字符串作为函数传递给 react-router-dom Route？

Question

我正在使用 React 16.11.0 和 react-router-dom 5.1.2。

我有一个代表这样的页面的对象数组：

const pages = [{ url: "/", component: "Home" }, {...}, ... ]

更新：也许我应该提到这是来自 JSON 字符串，所以我无法确定值的类型。

我想通过映射在 React 中动态生成路由：

import Home from './components/Home';
...
<BrowserRouter>
    <div className="App">
      <Switch>
        {pages.map(page => (
            <Route path={page.url} component={page.component} />
        ))}
      </Switch>
    </div>
</BrowserRouter>

page.url有效，但 URL 无论如何都可以是字符串。page.component没有正确加载，我认为是因为它是一个字符串，而导入Home的是一个 React 函数组件。

我尝试使用eval()并将字符串Function()转换page.component为对象，但它们不起作用。

我已经尝试过文档和搜索引擎，但无法找到解决方案。也许我在错误的地方搜索。

这可能吗？我该怎么做呢？

标签： javascriptreactjsreact-router-dom

Answer 1

实际上，您甚至可以避免导入模块 -require很方便：

const pages = [{ url: "/", component: "Home" }, {...}, ...]
   .map((obj) => (
      { url: obj.url, component: require(`./components/${obj.component}`).default }
   );

然后按照你的逻辑：

<Switch>
   {pages.map(page => (
      <Route path={page.url} component={page.component} />
   ))}
</Switch>