<Router> 在另一个<Router>里面

Question

我对React和React路由器dom(v6(还很陌生，我偶然发现了一个错误："；错误：无法在另一个<Router>中呈现<Router>。你的应用程序中永远不应该有多个">

虽然也有类似的帖子，但我没有找到我想要的答案。到目前为止，我只有这个代码：

标题.tsx：

import './Header.min.css';
import { FaDumbbell } from 'react-icons/fa';
import { AiOutlineHome } from 'react-icons/ai';
import { useState } from 'react';
import App from '../../App';
import {
BrowserRouter as Router,
Routes,
Route,
Link,
} from 'react-router-dom';

export default function Header() {
const [status, setStatus] = useState('Sign Up');
return (
<header id = "wrapper">
<h1><span>Fit</span>ify <FaDumbbell /></h1>
<Router>
<div>
<nav>
<ul id = "nav_links">
<li id = "home">
<Link to = "/"><AiOutlineHome id = 'house' />Home</Link>
</li>
<li className = "rest">{status}</li>
<li className = "rest">Stats</li>
<li className = "rest">Leaderboards</li>
<li className = "rest">Goals</li>
</ul>
</nav>
<Routes>
<Route path = "/" element = {<App />} />
</Routes>
</div>
</Router>
</header>
)
}

Answer 1

您只能在应用程序中使用路由器一次。您可以像应用程序组件一样在父组件中使用路由器。你可以删除嵌套的路由器，然后这个问题就解决了。