javascript - 在JSX里面渲染React变量，具体怎么到 'tokenize' React Router结构？是否可以？

Question

问题:

我正在关注 React Router 基本路由 quickstart guide在全新的 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>;
}

...按预期工作，但是我想弄清楚如何“标记化”路由路径 - 目前是“关于”、“用户”和“主页”。

---

挑战:

我创建了一个包含以下内容的 ./tokens.js 文件:

export default {
    one: 'one',
    two: 'two',
    three: 'three'
};

...并且可以在某些地方成功地将这些示例 token 值注入(inject) JSX(?)，但不能或根本无法解决如何在其他地方做到这一点。

例如下面的作品:

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

...这允许我通过 tokens.js 动态更改链接值。

但我仍然无法将所有内容完全整合到单个 token 更改中，因为我仍然有如下结构需要手动/单独重命名:

<Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>

...其中我看不到任何方法可以将 等更改为 token.vals

还有

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

等其中函数名称同样是“固定的”，那么我如何确保提供的演示中“Home”的所有实例都可以统一链接到单个标记变量？

我有哪些选择？

---

背景:UI/UX 设计师几乎没有 Web 开发经验，对 React 非常陌生，对此的答案很可能是我在尝试做一些愚蠢的事情，而不是问题是什么是/不可能的。对所有答案开放。

Answer 1

你可以有这样的结构:

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

然后做

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