React-Router-Dom显示空白屏幕

发布于 2025-01-30 07:54:24 字数 977 浏览 3 评论 0原文

我试图弄清楚反应，不确定这里有什么问题，因为浏览器显示空白。

这是代码。

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

原文

I am trying to figure out React and am not sure what is wrong here, as the browser shows a blank.

Here is the Code.

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;

Update 1 -

The code as viewed on 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')
  );

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

合久必婚 2025-02-06 07:54:24

这是react@18更改React应用程序的呈现方式。 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 更深入的细节。

This is a react@18 change in how React apps are rendered. createRoot takes a DOMNode reference, not JSX. Once the root is created, then you can call a render method on it.

Example:

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

See react-dom-client for more in-depth detail.

回复收藏 0 原文