這是我在App.js中的代碼:

import { useRecoilValue } from 'recoil';
import { authState } from './atoms/authAtom';
import { ToastContainer } from 'react-toastify';
import { ProtectedRoute } from './layout/ProtectedRoute';
import CourseDashboard from './features/course/CourseDashboard';
import { Route, Routes } from 'react-router-dom';
import NavBar from './features/nav/Navbar';
import { LoginPage } from './features/auth/LoginPage';

export const App = () => {
  const authentication = useRecoilValue(authState)

  return (
    <>
      <ToastContainer position='bottom-right' hideProgressBar />
      <NavBar />
      <Routes>
        <Route path='/courses' element={
          <ProtectedRoute user={authentication?.user} isAuthenticated={authentication?.isAuthenticated} redirectPath={'/login'}>
            <CourseDashboard />
          </ProtectedRoute>
        } />

        <Route path='/' element={
          <ProtectedRoute user={authentication?.user} isAuthenticated={authentication?.isAuthenticated} redirectPath={'/login'}>
            <CourseDashboard />
          </ProtectedRoute>
        } />

        <Route path='/login' element={<LoginPage />} />
      </Routes>
    </>
  )
}

這是在index.js中

import React from 'react';
import ReactDOM from 'react-dom/client';
import { App } from './App';
import { RecoilRoot } from 'recoil';
import { BrowserRouter } from 'react-router-dom';
import 'semantic-ui-css/semantic.min.css'
import './styles.css'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RecoilRoot>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </RecoilRoot>
  </React.StrictMode>
);

我將反沖用于狀態(tài)管理，語義UI React用于樣式化，React Router DOM v6用于路由。

出于某種原因，NavBar元素呈現(xiàn)在頁面的頂部，但NavBar下面的組件(如CourseDashboard或LoginPage)從不呈現(xiàn)。

這是我的登錄頁面:

import { Container, Form, Input, Text } from "semantic-ui-react";

export const LoginPage = () => {
  return (
    <>
      <Form>
        <Input name="email" type="email" placeholder="Enter Email" />
        <Input name="password" placeholder="Enter Password" type="password" />
      </Form>
    </>
  );
};

如果我注釋掉語義UI部分，只使用html元素，如下所示:

import { Container, Form, Input, Text } from "semantic-ui-react";

export const LoginPage = () => {
  return (
    <>
      {/* <Form>
        <Input name="email" type="email" placeholder="Enter Email" />
        <Input name="password" placeholder="Enter Password" type="password" />
      </Form> */}

      <h1>login</h1>
    </>
  );
};

它呈現(xiàn):

我已經(jīng)絞盡腦汁好幾個小時了，也找不到原因。有人能弄清楚發(fā)生了什么嗎？提前感謝。

編輯:

考慮到注釋，檢查DOM，看起來像LoginPage組件呈現(xiàn)的那樣，但是由于某種原因，它在NavBar組件的后面，盡管它們是獨立的組件。有沒有辦法將它們分開并在導(dǎo)航欄下面呈現(xiàn)LoginPage組件？

這是導(dǎo)航欄組件:

import React from "react";
import { Menu, Container } from "semantic-ui-react";
import { useRecoilValue } from "recoil";
import { authState } from "../../atoms/authAtom";
import { NavLink } from "react-router-dom";
import { SignedInMenu } from "./SignedInMenu";

export default function NavBar() {
  const authentication = useRecoilValue(authState);
  console.log(authentication);

  return (
    <Menu inverted fixed="top">
      <Container>
        <Menu.Item as={NavLink} exact to="/" header>
          <img
            src="/assets/logo.jpg"
            alt="logo"
            style={{ marginRight: "15px" }}
          />
          Bhaktivedanta Vedic Academy
        </Menu.Item>

        <Menu.Item name="Courses" as={NavLink} to="/courses" />

        {authentication?.isAuthenticated && <SignedInMenu />}
      </Container>
    </Menu>
  );
}

NavBar組件使用固定定位，這使它脫離了DOM布局流，其他元素從視圖頂部開始呈現(xiàn)在它下面。您可以通過向正在呈現(xiàn)的每個路由組件添加padding-top來解決這個問題，或者作為一個更簡單的解決方案，通過一個布局路由組件將NavBar和Outlet呈現(xiàn)到一個應(yīng)用padding-top CSS規(guī)則的div元素中。導(dǎo)航條大約44px高，所以這個值左右的任何東西都足夠了。

示例:

import { Outlet } from "react-router-dom";
import NavBar from "./features/nav/NavBar";

const AppLayout = () => (
  <div className="app-layout">
    <NavBar />
    <Outlet />
  </div>
);

<Routes>
  <Route element={<AppLayout />}> // <-- Layout wraps all routes
    <Route
      element={
        <ProtectedRoute
          user={authentication?.user}
          isAuthenticated={authentication?.isAuthenticated}
          redirectPath={"/login"}
        />
      }
    >
      <Route path="/courses" element={<CourseDashboard />} />
      <Route path="/" element={<CourseDashboard />} />
    </Route>
    <Route path="/login" element={<LoginPage />} />
  </Route>
</Routes>

.app-layout {
  padding-top: 3.25rem; /* 45px from base 14px font size */
}