<Router> 在另一个 <Router> 中答案

【问题标题】：<Router> inside another <Router><Router> 在另一个 <Router> 中
【发布时间】：2022-01-16 07:49:03
【问题描述】：

我对 React 和 react-router-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>
  )
}

【问题讨论】：

Sooo.... 只使用一个路由器？
我认为路由器需要位于应用程序的根目录，而不仅仅是在标题中
不要在<Router> 中使用<Routes>，从您的代码中删除<Router> 它将起作用
错误信息和描述是否不够解释？不要渲染多个路由器，当然也不要在一个路由器中渲染第二个路由器。

标签： javascript reactjs react-router-dom

【解决方案1】：

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

【讨论】：

干杯，解决了。