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';

错误应该会消失。

Answer 2

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

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

将您的导入更改为

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

错误消失！！！

Answer 3

Routes 是一个单独的标签，包裹着Route 标签，不能导入和分配给BrowerRouter。所以分别导入。像这样：

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

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

react-router-dom <Routes> and <BrowserRouter> errors

typescript

reactjs

react-router

react-router-dom