添加标头时，不会呈现受保护的路由

Question

我正在做一个简单的应用程序，它有一个受保护的路径。

代码如下：

function App() {


return (
    <>
      <Router>
        <Header />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route
            path="/protected"
            element={
              <PrivateRoute>
                <ProtectedExample />
              </PrivateRoute>
            }
          />
          <Route path="/sign-in" element={<Login />} />
        </Routes>
      </Router>
    </>
  );
}

私家路线是：

import { Navigate } from "react-router-dom";
import { useAuthStatus } from "../hooks/useAuthStatus";
import Spinner from "./Spinner";

const PrivateRoute = ({ children }) => {
  const { loggedIn, checkingStatus } = useAuthStatus();

  if (checkingStatus) {
    return <Spinner />;
  }
  return loggedIn ? children : <Navigate to="/sign-in" />;
};

export default PrivateRoute;

保护路线

import React from "react";

const ProtectedExample = () => {
  return <div>ProtectedExample</div>;
};

export default ProtectedExample;

Header.js

import React from "react";
import { Container, Nav, Navbar } from "react-bootstrap";
import { Link } from "react-router-dom";

const Header = () => {
  return (
    <Navbar bg="light" variant="light" fixed="top">
      <Container>
        <Navbar.Brand>
          <Link to="/">Vivans</Link>
        </Navbar.Brand>
        <Nav className="me-auto">
          <Link to="/sign-in" className="me-4">
            Login
          </Link>
          <Link to="/protected">ProtectedRoute</Link>
        </Nav>
      </Container>
    </Navbar>
  );
};

export default Header;

删除App.js中的标头组件时

产出如下：

​

但是当我在App.js中添加标头组件时

产出如下：

它不会像预期的那样返回ProtectedExample。

为什么？

Answer 1

实际上，它可能是在渲染它。它可能是看不见的，因为CSS的样式。

<Navbar bg="light" variant="light" fixed="top">

在上面的行中，您已经将NavBar设为fixed。所以ProtectedExample会在NavBar后面

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/position

试着像这样改变组件，

const ProtectedExample = () => {
  return <div style="margin-top: 3em">ProtectedExample</div>;
};

这可能会使内容向下显示，使其可见。