"反應路由器不起作用\/\/即使遵循文檔"

Question

所以我第一次嘗試做出反應，我按照文檔和路由器 dom 卡住了當我使用 Switch 時說“在 'react-router-dom' 中找不到導出'Switch'（導入為'Switch'）”所以簡而言之，我的路由器不工作，我想要一種方法讓它工作，它也是最新版本的 react，因為我昨天剛做了這個項目

import logo from './logo.svg';
import './App.css';
import Navbar from './components/Navbar';
import Form from './components/Form';
import Sus from './components/Sus';
import React from "react";
import {
  BrowserRouter as Router,
  // Switch,
  Routes,
  Route,
  Link
} from "react-router-dom";

function App() {
  return (
    <Router>
    <div className="">
      <Navbar title="Sus" main="SusHome" about="SusAbout"/>
      <div className="container my-5">

      <Routes>
          <Route path="/" component={Form}/>
          <Route path="/sus" component={Sus} />
        </Routes>
      </div>
    </div>
    </Router>
  );
}

export default App;

Answer 1

要渲染您的組件，您必須像這樣傳遞：

<Route path="/" element={<Form/>}/>
<Route path="/sus" element={<Sus/>} />

Answer 2

將 React 路由器 V5 升級到 V6<\/strong>

如果您曾經使用過 React Router，您就會知道我們需要將路由包裝到這個<Switch><\/code>組件中，以確保同時加載這些路由中的一個，而不是所有匹配的路由。 像這樣的東西<\/em>

export function App() {
  return (
    <div>
      <Switch>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </div>
  )
}