在另一个

Question

我对React和react-router-dom（v6）非常陌生，我偶然发现了一个错误：错误：您无法渲染

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

标题。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

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