路由器react中没有可见的内容

Question

以下代码没有在网页上显示任何内容

import './App.css';
import Navbar from "./components/Navbar.jsx";
import Tef from './components/Tef';
import About from './components/About';
import Home from './components/Home';
import {useState} from 'react';
import { BrowserRouter as Router ,Routes as Switch , Route ,Link}from "react-router-dom";
function Main() {

const [mode, setMode] = useState("Dark")
const [NavbarIDUS , setNavbarID] = useState("Heading-Nav_D")
const [divIDUS , setDivID] = useState("Nav-bg_D")
const [PIDUS , setPID] = useState("title_D")
const [CIDUS , setCID] = useState("contents_D")

const lightTheme = () =>
{
setMode("Dark")
setCID("contents_D")
setDivID("Nav-bg_D")
setNavbarID("heading-Nav_D")
setPID("title_D")
document.body.style.background = "#1E1E1E"
document.body.style.color = "white"
}
const darkTheme = () =>
{
setMode("Light")
setCID("contents")
setDivID("Nav-bg")
setNavbarID("heading-Nav")
setPID("title")
document.body.style.background = "#EEE"
document.body.style.color = "black"
}
//mode handler
const modeHandler = (event) =>
{   
if(mode === "Dark")
{
darkTheme();
}
else
{
lightTheme();
}
}
//renderer
return(<>
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
</>    );

}
export default Main;

那么我该怎么做才能让它像一样工作呢

我本来想在屏幕上看到一些内容，但我给了我一个空白屏幕

我关注了一个网站https://v5.reactrouter.com/web/guides/quick-start但它对我不起作用，我该怎么办？？？

Answer 1

您说您使用的是版本6，但您的代码中有<switch>。这是版本5的语法。下面是一个React Router V6示例。

<BrowserRouter>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/About">About</Link>
</li>
<li>
<Link to="/Users">Users</Link>
</li>
</ul>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/About" element={<About />} />
<Route path="/Users" element={<Users />} />
</Routes>
</BrowserRouter>

编辑：钩子只能在函数组件"的内部调用；由于多种原因而发生如果您收到一个无效的挂钩错误，那么如果您正确地遵循了V6示例，则这与react路由器无关。有一些事情可能会导致这个问题。无效的挂机呼叫警告

更改

从"react"导入｛useState｝；

收件人import React, {useState} from 'react';