如何基于URL条件渲染React组件？含无导入声明调用问题

一、修复React Router未渲染的问题 #

• 检查路由嵌套路径：如果Document组件是在父路由（如/articles）下渲染的，子路由的path要使用相对路径，去掉开头的斜杠，改成article-one而非/article-one。绝对路径会从根路由匹配，忽略父路由的路径前缀，导致匹配失败。
• 确认ArticleOne组件已正确导入，无拼写或路径错误。

二、JSON配置+动态导入的最优方案 #

你想用JSON管理文章路径的思路完全可行，之前的问题出在React.lazy未配合Suspense使用，以及错误的动态组件渲染方式。以下是完整实现步骤：

1. 创建文章路由配置JSON #

新建articleRoutes.json文件，存储路径与组件文件的对应关系：

{
  "/article-one": "./ArticleOne",
  "/article-two": "./ArticleTwo"
}

2. 实现动态组件映射与渲染 #

利用React.lazy动态导入组件，配合Suspense处理加载状态，同时通过映射表解决动态组件名无法渲染的问题：

import { lazy, Suspense } from 'react';
import { useLocation } from 'react-router-dom';
import articleRoutes from './articleRoutes.json';
import Title from './Title';
import Author from './Author';
import MoreContent from './MoreContent';

// 构建路径到懒加载组件的映射表
const ArticleComponentMap = Object.fromEntries(
  Object.entries(articleRoutes).map(([path, componentPath]) => [
    path,
    lazy(() => import(componentPath))
  ])
);

function Document() {
  const location = useLocation();
  // 根据当前URL路径匹配对应的组件
  const CurrentArticle = ArticleComponentMap[location.pathname];

  return (
    <>
      <Title title={articleTitle} subtitle={articleSubtitle} />
      <div className="body">
        <Author author={articleAuthor} date={articleDate} />
        {/* Suspense必须配合React.lazy使用，避免加载时页面空白 */}
        <Suspense fallback={<div>加载中...</div>}>
          {CurrentArticle && <CurrentArticle />}
        </Suspense>
      </div>
      <MoreContent />
    </>
  );
}

export default Document;

关键注意点 #

• React.lazy加载组件时，必须用Suspense包裹，提供加载占位符（如加载中...），否则组件加载过程中会出现空白。
• JSX不允许直接用字符串变量作为组件名（如<{componentName} />），必须通过映射表将路径转换为组件引用，再以大写开头的变量形式渲染（如<CurrentArticle />）。
• 动态导入的组件路径要确保正确，比如Document在src/components下，ArticleOne在src/components/articles下，JSON中的路径应写为./articles/ArticleOne。

内容的提问来源于stack exchange，提问作者Joseph Walsh