我正在使用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>
);
}
...
但是，它仍然不起作用，給出以下錯誤：
uj5u.com熱心網友回復：
本次進口
import { BrowserRouter, BrowserRouter as Routes, Route } from 'react-router-dom';
將 BrowserRouter 別名為兩個不同的東西。
將匯入更改為
import { BrowserRouter, Routes, Route } from 'react-router-dom';
并且錯誤應該消失。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/407274.html
標籤：