react-router-dom中BrowserRoute未找到及组件导出导入报错求助

1. 修复react-router-dom的导入错误 #

你把路由组件名拼错了，正确的名称是BrowserRouter，不是BrowserRoute。同时你的App组件缺少return语句，会导致组件无法渲染内容，一起修改：

// app.js 修正后的代码
import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { Box } from '@mui/material'

import { Navbar, Feed, VideoDetail, SearchFeed, ChannelDetail } from './components/index'

const App = () => {
  return (
    <BrowserRouter>
      <Box sx={{ backgroundColor: '#000' }}>
        <Navbar />
        <Routes>
          <Route path='/' exact element={<Feed />} />
          <Route path='/video/:id' element={<VideoDetail />} />
          <Route path='/channel/:id' element={<ChannelDetail />} />
          <Route path='/search/:searchTerm' element={<SearchFeed />} />
        </Routes>
      </Box>
    </BrowserRouter>
  )
}

export default App

2. 修复组件导出/导入不匹配问题 #

报错显示你的Navbar、VideoDetail等组件是命名导出，但你在components/index.js里试图导入它们的默认导出，两种解决方式选其一：

方式一：修改components/index.js的导出逻辑 #

直接导出组件的命名导出：

// components/index.js
export { Navbar } from './Navbar'
export { ChannelDetail } from './ChannelDetail'
export { VideoDetail } from './VideoDetail'
export { SearchFeed } from './SearchFeed'
export { Feed } from './Feed'

方式二：修改组件文件为默认导出 #

以Navbar.js为例，其他组件（VideoDetail、Feed等）做同样修改：

// Navbar.js
const Navbar = () => {
  // 组件原有内容
}

export default Navbar

修改后components/index.js的原有代码即可正常使用。

内容的提问来源于stack exchange，提问作者krish