React Router Dom react js Blank 白屏显示

Question

我在我的项目中添加了 React Router Dom 我想显示特定区域组的聊天区域。所以我正在使用 React Router Dom 来访问唯一链接我用的是 React Router Dom 版本：8.1 我的项目

App.js

import './App.css';
import Chat from './components/Chat';
import Sidebar from './components/Sidebar';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";


function App() {
  return (
    
    <div className="app">
      <div className="app_body">
      <Router>
        <Sidebar />
          <Routes>
            <Route path="/">
              
              <Chat/>
            </Route>

          </Routes>
        </Router>
                    </div>
  </div>

    
  );
}

export default App;

运行之后结果：空白屏幕显示使用 React Router 之前 Dom

输出

Answer 1

尝试使用 element 道具

import './App.css';
import Chat from './components/Chat';
import Sidebar from './components/Sidebar';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  return ( 
    <div className="app">
      <div className="app_body">
          <Router>
            <Sidebar />
            <Routes>
                <Route path="/" element={<Chat />} />
            </Routes>
          </Router>
      </div>
    </div>
  );
}
export default App;

React Router Dom react js Blank 白屏显示

React Router Dom react js Blank white screen Show

reactjs

react-hooks

react-router

react-router-dom

react-router-component