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

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>
  )
}