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

Posted 2023-02-19

【中文标题】错误：./src/App.js 尝试导入错误：“Switch”未从“react-router-dom”导出

【英文标题】：Error: ./src/App.js Attempted import error: 'Switch' is not exported from 'react-router-dom'

【发布时间】：2022-01-21 08:04:52

【问题描述】：

我需要使用 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() 
    constroomid = 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-dom v6 中被Routes 取代。删除导入并修复您在 Routes... 中呈现的内容，只有 Route 或 React.Fragment 是 Routes 组件的有效子组件。除非您指定导航对象，否则不能单独使用Router，使用更高级别的路由器之一，例如BrowserRouter。此外，在 Chat 中不再有从 RRDv6 导出的 withRouter HOC。如果您仍然需要withRouter HOC，您将不得不自己动手。如果您需要，我可以提供帮助。

您使用的是哪个react-router-dom 版本？在 v.6 中，开关被替换为 Routes。

@DrewReese ，是的，很明显。但我仍然想确定，他是否也可以在他的问题中包含他正在使用的版本以供将来参考。

版本为 8.1.2

现在出现此错误应用解决方案后，您给出了@DrewReese × 错误：元素类型无效：期望字符串（用于内置组件）或类/函数（用于复合组件）但得到：不明确的。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。检查App的渲染方法。

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

【讨论】：

感谢您的回复 现在我收到此错误 错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。检查App的渲染方法。

我在最后一个问题中添加了上面错误的截图

@ReactDev 似乎 Sidebar 没有声明/导入。

我重新启动计算机并再次运行项目并用 Switch 它知道工作替换路由。我的反应路由器 dom 版本是 5.3.0

谢谢你有一个美好的一天