为什么我的 home.js 在浏览器中没有显示任何内容？

Question

我正在参加全栈 Web 开发课程，目前正在学习 React 来为一个作品集构建一个项目，希望能够进入前端 Web 开发人员的职位。

找到了这个 2 年前的教程，我认为这是一个不错的学习起点：https://www.youtube.com/watch?v=QwarZBtFoFA&t=700s.

我尝试过并注意到以下几点：

1. HTML 未显示在浏览器检查中
2. 本地主机：3000（无）
3. 本地主机：3000/Home（无）
4. 我已按照教程进行操作（如果错过任何步骤，请重新观看）
5. 将我的代码与教程的存储库代码进行比较
6. 从头开始两次（对于 Home.js/App.js）
7. 改为
8. 我在浏览器上遇到的唯一错误（VSC 上没有任何错误）：

警告：ReactDOM.render 在 React 18 中不再支持。请改用 createRoot。在您切换到新 API 之前，您的应用程序将像运行 React 17 一样运行。了解更多信息：https://reactjs.org/link/switch-to-createroot

并且

没有路线匹配位置“/Home”

我已经更新并检查了react的版本，并说是10.2.4，但无法确定它是否是React 18或更低的版本。如何对现有文档实施 createRoot？

T.I.A

pages/Home.js

import React from 'react';
import { Link } from 'react-router-dom';


function Home() {
    return (
        <div className='home'>
            <div className='headerContainer'>
                <h1>Heavy Hitters Gym</h1>
                <p>WHERE YOU GET FIT</p>
                <Link to="/Menu">
                    <button> JOIN NOW </button>
                </Link>
            </div>
        </div>
    );
}

export default Home;

src/App.js

import React from 'react';
import Home from './pages/Home';
import './App.css';
import Navbar from './components/Navbar';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <Router>
        <Navbar />
        <Routes>
          <Route path="/" exact component={Home} />
        </Routes>
      </Router>
    </div>


  );
}

export default App;

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

Answer 1

关于第一条错误消息，React 抱怨您在 index.ts 文件中使用 ReactDOM.render() 并要求您使用 ReactDOM.createRoot()，因为 ReactDOM.render() 已过时。

在 src/index.js 文件中替换为：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

关于第二条错误消息，“/Home”路径确实不存在于您的代码中，因此当您尝试访问该路径时，会出现此错误。

真正的问题是在文件 src/App.js 中，您在“组件”属性中传递

Home

...
<Route path="/" exact component={Home} />
...

但是“组件”属性实际上需要整个 JSX 元素。因此，您可以通过将代码替换为以下内容来修复它：

...
<Route path="/" exact component={<Home/>} />
...