[英]react-router-dom <Routes> and <BrowserRouter> errors
I am using react-router-dom
and am facing an issue with using <Routes>
: Here is my index.tsx
file:我正在使用
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')
);
and this is my App.tsx file这是我的 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;
With this code, I am getting the following error:使用此代码,我收到以下错误:
After searching, I added the <BrowserRouter>
element, like so:搜索后,我添加了
<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>
);
}
...
But, it still doesn't work, giving the following error:但是,它仍然不起作用,给出以下错误:
This import本次进口
import { BrowserRouter, BrowserRouter as Routes, Route } from 'react-router-dom';
aliases BrowserRouter to two different things.将 BrowserRouter 别名为两个不同的东西。
Change the import to将导入更改为
import { BrowserRouter, Routes, Route } from 'react-router-dom';
and the error should go away.并且错误应该 go 消失。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.