React Router Dom react js 空白白屏显示

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;