嘿，我有一個 reactjs 應用程式，它是 app.tsx
import tw from 'twin.macro';
import { hot } from 'react-hot-loader/root';
import { Route, BrowserRouter as Router, Routes as Switch } from 'react-router-dom';
import Main from './Main';
import Test from './Test';
const App = () => {
return (
<><Main /><div css={tw`mx-auto w-auto`}>
<Router>
<Switch>
<Route path="/element" element={<Test />} />
<Route path="/" element={<Main />} />
</Switch>
</Router>
</div></>
);
};
export default hot(App);
但是，當我運行./node_modules/.bin/webpack --watch --progress的localhost/作業，但localhost/element沒有作業，我有一個404錯誤未找到所請求的URL不在此服務器上找到你能告訴我為什么它不作業？
（我使用 react-router-dom 的 6.2.1）
uj5u.com熱心網友回復：
我認為您使用的是“react-router-dom”較新版本。Switch 不再在新版本中。請在此處閱讀 Switch 不是從“react-router-dom”匯出的
uj5u.com熱心網友回復：
import { Route, BrowserRouter as Router, Routes as Switch } from 'react-router-dom';
function App() {
const Main = () => {
return (
<h1>Main</h1>
)
}
const Test = <h1>Test</h1>
return (
<div >
<Router>
<Switch>
<Route path="/element" element={<Main />} />
<Route path="/" element={Test} />
</Switch>
</Router>
</div>
);
}
export default App;你需要使用<Main /> 結構
uj5u.com熱心網友回復：
首先，您需要提及您正在使用的版本，如果它適用于您，請嘗試此操作：-
在您的代碼中：import { Route, BrowserRouter as Router, Routes as Switch } from 'react-router-dom';
您匯入Routes為Switch而不是Switch作為Routes
你的組件應該是這樣的，作業：-
import tw from 'twin.macro';
import { hot } from 'react-hot-loader/root';
import { Route, BrowserRouter as Router, Switch as Routes} from 'react-router-dom';
import Main from './Main';
import Test from './Test';
const App = () => {
return (
<><Main /><div css={tw`mx-auto w-auto`}>
<Router> {<Pay />}
<Routes>
<Route exact path="/element" element= {<Test />} />
<Route exact path="/" element= {<Main/>} />
</Routes>
</Router>
</div></>
);
};
注意：嘗試<BrowserRouter> </BrowserRouter>像這樣包裝你的 index.tsx 組件：
ReactDOM.render( <BrowserRouter> <App/> </BrowserRouter>, document.getElementById('root'))
因此您可以從 app.tsx 中洗掉 BrowserRouter
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/399859.html
標籤：反应