Javascript 呈现JSX内部的变量，特别是如何'；标记化&x27；反应路由器结构？可能吗？

问题：

我正在遵循基本的路由 在全新的

create react app

设置中使用精确的模板，用以下演示替换默认的app.js：

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

…并且可以在某些地方成功地将这些示例令牌值注入JSX（？），但在其他地方无法或根本无法解决如何进行

例如，以下工作：

<Link to="/">{tokens.one}</Link>

函数名类似地是“固定”的，那么我如何确保提供的演示中的所有“Home”实例都可以统一链接到单个令牌变量

我的选择是什么？

---

---

背景：UI/UX设计师对web开发经验缺乏经验，对React非常熟悉，很有可能答案是我试图做一些愚蠢的事情，而不是什么是/不可能的问题。对所有答案开放。

您可以有如下结构：

export default [{path: '/about', component: About},{path: '/users', component: Users}];

然后呢

{tokens.map(t => (
    <Route path={t.path}> <t.component /> </Route>
))}

{tokens.map（t=>(
))}

我贴错的答案有一个轻微的语法错误，我现在就修复了。非常感谢。这非常清楚，效果非常好。这正是我想要的逻辑。我唯一悬而未决的问题是，由于React Router将名称绑定到以后要调用的函数名，因此如何确保像：

function About（）{return About；}

这样的函数名保持我们刚刚建立的约定？为了进一步混淆，即使在成功使用您的解决方案（即

function One（）{return Hello}

）后对下面的函数名进行硬编码，我也无法调用任何东西。我不确定我是否理解您的要求以及希望发生什么。

function Home(){}
function About(){}

export default [{path: '/about', component: About},{path: '/users', component: Users}];

{tokens.map(t => (
    <Route path={t.path}> <t.component /> </Route>
))}