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

Question

我正在使用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>
  );
}
...

但是，它仍然不起作用，给出以下错误：

Answer 1

此次进口

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

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

将导入更改为

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

并且错误应该消失。