React路由器不工作//即使在遵循文档之后

Question

所以我第一次尝试做出反应，我遵循了文档，在路由器dom上我被卡住了当我使用Switch时；在"react router dom"中找不到export"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/>} />

文档react router dom版本6是这样的。

Answer 2

将React Router V5升级到V6

如果你曾经使用过React Router，你知道我们需要将我们的路由封装到这个<Switch>组件中，以确保同时只加载其中一个路由，而不是所有匹配的路由类似的东西

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

现在有了V6，我们将名称从Switch更改为Routes，现在Routes组件有了一个名为element的新道具，您可以在其中传递它需要在该组件内渲染的组件，如下

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