React-router-dom 显示空白屏幕

Question

我正在尝试弄清楚 React，我不确定这里出了什么问题，因为浏览器显示空白。

这是代码。

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link} from "react-router-dom";
import Home from './Home';

function App() {
    return (
        <>
            <Router>
                <Routes>
                    <Route exact path="/" element={<Home />}/>
                </Routes>
            </Router>
        </>
    );
  }
  
export default App;

更新 1 -

在 index.js

上查看的代码

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

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

Answer 1

如果您的屏幕变黑并且您没有看到任何错误，那么控制台中一定有错误。

Answer 2

我在此页面中没有发现任何错误。在这里检查你是否正确导入了home组件。如果正确导入，请检查 home 组件是否有错误。您还可以检查您是否在控制台中收到任何错误或警告。

Answer 3

这是对 React 应用呈现方式的 react@18 更改。 createRoot 采用 DOMNode 引用，而不是 JSX。创建根后，然后您可以在其上调用render方法。

示例：

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

请参阅 react-dom-client 了解更多 in-depth 详细信息。

React-router-dom 显示空白屏幕

React-router-dom showing blank screen

javascript

reactjs

react-dom