浏览器路由器未从反应路由器导出答案

【问题标题】：browser router not being exported from react router浏览器路由器未从反应路由器导出
【发布时间】：2022-01-15 19:04:23
【问题描述】：

我正在尝试使用 react 路由器 dom 制作不同的页面，以便它可以在点击时转到不同的页面，但由于未导入浏览器路由器，因此应用程序无法编译。我只是直接从网站上复制粘贴的。谁能告诉我错误在哪里以及如何解决它

应用，js

import React from 'react';
import Header from './components/Header';
import Home from './components/Home';
import './App.css';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router'
import Detail from './components/Detail';

function App() {
  return (
    <div className='App'>
      <Router>
        <Header />
        <Switch>
          <Route path='detail'>
            <Detail />
          </Route>
          <Route path='/'>
            <Home />
          </Route>
        </Switch>
      </Router>
      <Home />
    </div>
  )
}

export default App;

package.json {

"name": "disneyplus-clone",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.6.2",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.1.0",
    "react-scripts": "4.0.3",
    "react-slick": "^0.28.1",
    "slick-carousel": "^1.8.1",
    "styled-components": "^5.3.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

【问题讨论】：

尝试使用from 'react-router-dom'

标签： javascript reactjs react-router

【解决方案1】：

您使用的是第 6 版的 react-router-dom，而您没有在您的 package.json 文件中指定了 react-router。

从react-router-dom 导入组件并转换为使用 RRDv6 组件。 Switch 组件已替换为必须包装 Route 组件的 Routes 组件。 Route 组件现在也将它们的路由组件呈现在 element 属性上as JSX。

import React from 'react';
import Header from './components/Header';
import Home from './components/Home';
import './App.css';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
import Detail from './components/Detail';

function App() {
  return (
    <div className='App'>
      <Router>
        <Header />
        <Routes>
          <Route path='detail' element={<Detail />} />
          <Route path='/' element={<Home />} />
        </Routes>
      </Router>
      <Home />
    </div>
  )
}

【讨论】：