當我運行本地主機時，React 和 Node 什么都不顯示

Question

我的項目有問題，我做的一切就像教程的人一樣，但是當我運行服務器時，我的 http://localhost:3000/ 什么都不顯示，沒有錯誤，但也什么都不做。 當我導入 react-roter-dom 並更改 App.js 時，所有這一切都發生了

由此

function App() {
  return (
    <div>

    <h1>Hello world</h1> 
    </div>
  );
}

export default App;

對此

    import React from "react";
    import { createRoot } from "react-dom/client";
    import {
      createBrowserRouter,
      RouterProvider,
      Route,
      Link,
    } from "react-router-dom";
    import Login from "./pages/Login";
    import Register from "./pages/Register"
    
    const router = createBrowserRouter([
      
      {
        path: "/",
       element: <div> This is home  world!</div>,
      },
    
      
    
    ]);
    
    function App() {
      return (
        <div>
            <RouterProvider router={router}> </RouterProvider>
        </div>
      );

}

export default App;

它至少應該顯示“這是家庭世界”的信息

請幫助我，因為我不知道發生了什么，沒有顯示錯誤但它也沒有做任何事情

這就是我得到的

在路由器dom之后

在放置路由器 dom 之前用這個向我展示“hello world”

function App() {
      return (
        <div>
    
        <h1>Hello world</h1> 
        </div>
      );
    }
    
    export default App;

index.JS


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>
);

開發控制台

App.js 

import React from "react";
import { createRoot } from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
  Route,
  Link,
} from "react-router-dom";
import Login from "./pages/Login";
import Register from "./pages/Register"

const router = createBrowserRouter([
  
  {
    path: "/",
   element: <div> This is home  world!</div>,
  },

  

]);

function App() {
  return (
    <div>
        <RouterProvider router={router}/>
    </div>
  );

}

export default App;

控制台向我顯示這些錯誤

Answer 1

我認為您只是沒有保存初始代碼。 你可能想在你的 vs 代碼上打開自動保存。 並為您的索引和應用程序文件使用正常的反應渲染方法。

索引.js：

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

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

應用程序.js：

import React from 'react'

const App = () => {
  return (
    <div>
      <h1>GPT-3</h1>
    </div>
  )
}

export default App

嘗試運行它但保存代碼或打開自動保存