react-router-dom <Routes> 和 <BrowserRouter> 错误答案

【问题标题】：react-router-dom <Routes> and <BrowserRouter> errorsreact-router-dom <Routes> 和 <BrowserRouter> 错误
【发布时间】：2022-01-10 03:54:55
【问题描述】：

我正在使用react-router-dom，但在使用<Routes> 时遇到问题：这是我的index.tsx 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

这是我的 App.tsx 文件

import React from 'react';
import { RecoilRoot } from 'recoil';
import { BrowserRouter, BrowserRouter as Routes, Route } from 'react-router-dom';
import Loading from './sign/loading';
import SignIn from './sign/signIn';
import SignUp from './sign/signUp';
import SettingCare from './manage/settingCare';
import ManageCare from './manage/manageCare';
import AddCare from './manage/addCare';
import Main from './main/main';

function App() {
  return (
    <RecoilRoot>
      <Routes>
        <Route path='/' element={<Main />} />
        <Route path='/loading/*' element={<Loading />} />
        <Route path='/sign-in/*' element={<SignIn />} />
        <Route path='/sign-up/*' element={<SignUp />} />
        <Route path='/setting-care/*' element={<SettingCare />} />
        <Route path='/manage-care/*' element={<ManageCare />} />
        <Route path='/add-care/*' element={<AddCare />} />
      </Routes>
    </RecoilRoot>
  );
}

export default App;

使用此代码，我收到以下错误：

搜索后，我添加了<BrowserRouter>元素，如下所示：

...
function App() {
  return (
    <RecoilRoot>
      <BrowserRouter>
        <Routes>
          <Route path='/' element={<Main />} />
          <Route path='/loading/*' element={<Loading />} />
          <Route path='/sign-in/*' element={<SignIn />} />
          <Route path='/sign-up/*' element={<SignUp />} />
          <Route path='/setting-care/*' element={<SettingCare />} />
          <Route path='/manage-care/*' element={<ManageCare />} />
          <Route path='/add-care/*' element={<AddCare />} />
        </Routes>
      </BrowserRouter>
    </RecoilRoot>
  );
}
...

但是还是不行，报如下错误：

【问题讨论】：

.tsx 文件在 React 项目中？
是的，是文件导入的问题。 react-router-dom v6 真的让我很困惑;;;

标签： reactjs typescript react-router react-router-dom

【解决方案1】：

这个导入

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

将 BrowserRouter 别名为两个不同的东西。

将导入改为

import { BrowserRouter, Routes, Route } from 'react-router-dom';

错误应该会消失。

【讨论】：

【解决方案2】：

解决方案：您的导入请将其更改为如下

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

将您的导入更改为

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

错误消失！！！

【讨论】：