使用create-react-app初始化项目后页面不显示及访问路径异常的问题求助

我之前也碰到过几乎一模一样的情况！让我一步步帮你排查和解决：

一、先解决URL带github username/repo name的问题 #

这个问题大概率是package.json里的homepage字段在搞鬼——可能是你配置工具时不小心加上的，或者某些初始化脚本自动生成的。

解决步骤：

• 打开项目根目录下的package.json文件
• 找到类似这样的行：

  "homepage": "https://your-github-username.github.io/your-repo-name"
  

• 直接删除这一行（或者注释掉）
• 停止当前的开发服务器，重新运行npm start

原理：Create React App会根据homepage字段设置应用的基础路径（base URL），删掉之后就会回到默认的http://localhost:3000。

二、解决App.js内容不显示的问题 #

这个情况要分几种常见情况排查：

1. 检查index.js的渲染逻辑 #

确保你正确导入并渲染了App组件，尤其是React 18版本的语法：

// index.js 正确示例（React 18）
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

如果是React 17及以下版本，要确保是：

// index.js 正确示例（React 17及以下）
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

重点确认：有没有导入App组件，有没有正确挂载到id="root"的DOM节点上。

2. 检查public/index.html的根节点 #

打开public/index.html，确认里面存在一个id为root的div：

<div id="root"></div>

如果这个节点被删除或者id写错了，React就找不到挂载的地方，自然显示不出内容。

3. 检查App.js的导出和内容 #

• 确保App组件正确导出：比如末尾有export default App;
• 确保组件返回了有效的JSX：比如不要忘记写return（如果是函数组件），多个元素要用片段<>包裹，或者一个父元素包裹：

// App.js 正确示例
function App() {
  return (
    <div className="App">
      <h1>Hello React!</h1>
    </div>
  );
}

export default App;

4. 排查ESLint/Prettier的配置冲突 #

有时候配置ESLint和Prettier时，可能不小心启用了一些会破坏React代码的规则，或者格式化时误改了组件结构。可以先临时重命名ESLint的配置文件（比如.eslintrc.js改成.eslintrc.js.bak），然后重启项目。如果内容能显示了，再逐步调整ESLint规则，避免和React语法冲突。

总结 #

建议先处理URL的问题，因为基础路径错误可能也会间接影响组件渲染（比如如果后续用到路由的话）。之后按照上面的步骤逐一排查App渲染的问题，应该就能解决啦！

内容的提问来源于stack exchange，提问作者Dawid Szemborowski