我知道我这样做的方式对于任务来说过于复杂，但我是在我熟悉的环境中学习React的。我真的在如何让组件有条件地渲染上磕磕绊绊。
我尝试了一些变化。
基本上，我有一个通用的Document组件，我想根据URL生成它的内容。

return (
    <>
      <Title title={articleTitle} subtitle={articleSubtitle} />
      <div className="body">
        <Author author={articleAuthor} date={articleDate} />
        <ConditionalComponentGoesHere />
      </div>
      <MoreContent />
    </>
  );
}

export default Document;

条件组件如下所示：

function ArticleOne() {
  return (
    <>
    JSX content
    </>

我试过React Router，但它不能呈现任何东西。导航，在树中更高的位置，正在使用它，也许这会影响它-但我没有得到任何控制台错误。

<>
      <Title title={articleTitle} subtitle={articleSubtitle} />
      <div className="body">
        <Author author={articleAuthor} date={articleDate} />
        <Routes>
          <Route path="/article-one" element={<ArticleOne />} />
        </Routes>
      </div>
      <MoreContent />
    </>

对我来说，一个更好的解决方案是将文章路径放在JSON文件中，并基于此呈现它们。我不能把它和内联导入放在一起。React.lazy()提供了一个没有控制台错误的空白屏幕，然后使用组件名称作为变量似乎是不允许的（<{componentName} />）。
有人能给我指个方向吗？真实的让人挠头