添加 Header 后，未呈现受保护的路由

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

中的 header 组件时

输出是：

但是当我在 App.js

中添加 header 组件时

输出是：它不像预期的那样 return 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>;
};

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

添加 Header 后，未呈现受保护的路由

When Header is added the Protected Route is not getting rendered

javascript

reactjs

react-bootstrap