<Router>在另一个<Router>中

Question

我对反应和反应非常陌生-路由器-dom (v6)，我偶然发现了一个错误：“错误:您不能在另一个<Router>中呈现一个<Router>。您的应用程序中不应该有超过一个。”

虽然有一个similar post，但我没有找到我正在寻找的答案。到目前为止，我只有以下代码：

Header.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

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