React Router Dom react js 空白白屏显示

Posted 2023-02-19

【中文标题】React Router Dom react js 空白白屏显示

【英文标题】：React Router Dom react js Blank white screen Show

【发布时间】：2022-01-22 03:26:59

【问题描述】：

我在我的项目中添加了 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 之前的空白白屏

输出

【参考方案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;

【讨论】：

8.1 是 v6，不是吗？组件 prop 一直使用到 v5。