錯誤：./src/App.js嘗試匯入錯誤：“Switch”未從“react-router-dom”匯出

我需要使用 Switch 執行此操作，但它給出了上述錯誤，我發現了上述錯誤，然后我將 Switch 替換為 Routes，然后我發現了以下錯誤。

應用js

import React from "react";    
import './App.css';
    import { Avatar, IconButton } from '@material-ui/core'
    
    import Sidebar from './Sidebar';
    import Chat from './Chat';
    import ReactDOM from "react-dom";
    import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
    
    function App() {
      return (
    
        <Router>
          <Routes>
    
        <div className="App">
           
           <div className="App_body">
                  {/*Sidebar*/}
                  <Sidebar/>
                   <Route path="/">
                   <Chat/>
                   </Route>
                   
           </div>
          
        </div>
        </Routes>
          
        </Router>
    
        
      );
    }
    
    export default App;

聊天.js

    import React from 'react'
import { Avatar, Icon, IconButton } from '@material-ui/core'
import SearchIcon from '@material-ui/icons/Search';
import AttachFileSharpIcon from '@material-ui/icons/AttachFileSharp';
import MoreVertSharpIcon from '@material-ui/icons/MoreVertSharp';
import { Search } from '@material-ui/icons';
import './Css/Chat.css';
import EmojiEmotionsIcon from '@material-ui/icons/EmojiEmotions';
import MicIcon from '@material-ui/icons//Mic';
import ReactDOM from "react-dom";
import { useParams } from 'react-router-dom';




export default function Chat() {
    const{roomid} = useParams();
    
    return (
        <div className="Chat">
            <div className="Chat_header">
                <Avatar/>
                <div className="Chat_headerInfo">

                    <h3>Room Name</h3>
                    <p>Last Seen</p>
                </div>
                <div className="header_right">

                    <IconButton>
                    <Search/>

                    </IconButton>

                    <IconButton>
                    <AttachFileSharpIcon/>
                    </IconButton>

                    <IconButton>

                    <MoreVertSharpIcon/>
                    </IconButton>

                </div>
            </div>


            <div className="Chat_body">

          <p className="Chat_message ">
           <span className="Chat_name">Asif</span>

          Hello How are you?
           <span className="Chat_time">2:09pm</span>

          </p>

          <p className="Chat_message Chat_receiver">
           <span className="Chat_name">Asif</span>

          Hello How are you?
           <span className="Chat_time">2:09pm</span>

          </p>
          <p className="Chat_message Chat_receiver">
           <span className="Chat_name">Asif</span>

          Hello How are you?
           <span className="Chat_time">2:09pm</span>

          </p>
            </div>


          <div className="Chat_footer">

           <EmojiEmotionsIcon/>
          <AttachFileSharpIcon/>
         <form>
             <input type="text" placeholder="Type your message"/>
             
             <input type="submit"/>
         </form>
            <MicIcon/>
        

          </div>
        </div>
    )
}

現在這個上面的錯誤發生實際上我正在為此創建WhatsApp克隆我需要你路由或切換相應地更改聊天視圖。我還檢查了 index.js 檔案，他們正在正確匯入 App.js 檔案。我沒有解決這個錯誤的想法。

uj5u.com熱心網友回復：

SwitchRoutes在react-router-domv6 中被替換。洗掉匯入并修復您在內部渲染的內容Routes...僅Route或組件的React.Fragment有效子級Routes。

Router除非指定導航物件，否則不能單獨使用，使用更高級別的路由器之一，例如BrowserRouter. 更高級別的路由器維護它們自己的內部歷史背景關系和位置狀態，即pathname可以從定義的location物件中讀取。

應用程式：

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

此外，Chat不再有withRouter從 RRDv6 匯出的HOC。如果您仍然需要withRouterHOC，則必須自己動手。

聊天：

import { useParams } from 'react-router-dom';

export default function Chat() {
  const { roomid } = useParams();
  return(
    ....
  );
}

標籤：反应 反应路由器 反应路由器-dom

上一篇：嘗試更新我的資料庫時出現“錯誤db._checkNotDeleted不是函式”

下一篇：BrowserRouter運行錯誤-無效的掛鉤呼叫