错误：。/src/App.js尝试导入错误：&#39；开关&#39；未从&#39；REACT-ROUTER-DOM&#39；中导出 [英] Error: ./src/App.js Attempted import error: 'Switch' is not exported from 'react-router-dom'

问题描述

我需要使用Switch执行此操作，但上面给出了错误 我在上面发现了这个错误，然后我将交换机替换为路由，然后我在下面发现了这个错误。

App 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文件。我不知道如何解决此错误。

推荐答案

Switch替换为react-router-domV6中的Routes。删除导入并修复您正在内部呈现的内容...只有Route或React.Fragment是Routes组件的有效子项。

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

App：

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

此外，在Chat中不再有从RRDv6中导出的withRouter即席。如果您仍需要withRouter专车，您将不得不推出自己的专车。

聊天：

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

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

这篇关于错误：。/src/App.js尝试导入错误：&#39；开关&#39；未从&#39；REACT-ROUTER-DOM&#39；中导出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！