错误：./src/App.js 尝试导入错误：“Switch”未从“react-router-dom”导出

Question

我需要使用 Switch 执行此操作，但它给出了上述错误 我发现上面的错误然后我替换 Switch to 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;

Chat.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 文件。我没有解决这个错误的想法。

Answer 1

Switch 在react-router-dom v6 中被Routes 取代。删除导入并修复您在 Routes... 中呈现的内容...只有 Route 或 React.Fragment 是 Routes 组件的有效子代。

您不能单独使用Router，除非您指定导航对象，使用更高级别的路由器之一，例如BrowserRouter。更高级别的路由器维护自己的内部历史上下文和位置状态，即可以从定义的location 对象中读取pathname。

应用：

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

此外，在Chat 中，不再有从 RRDv6 导出的 withRouter HOC。如果您仍然需要 withRouter HOC，您必须自己动手。

聊天：

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

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