Javascript 我有一个react应用程序，但不管出于什么原因，导航栏都被卡在页面底部而不是页眉中

我在react应用程序中有一个navbar组件，但由于某些原因，它呈现在页面底部，而不是页面顶部。我试着把导航放在一个单独的头球，并把绝对顶放在那个头球上，但这也没有解决它。代码如下

Navbar.js

import React from 'react';
import './App.scss'
import logo from './logo.svg';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import Projects from './Projects.js'; 
import Articles from './Articles.js'; 
import About from './About.js'; 


function Navbar() {
  return (
    <BrowserRouter>
      <div className="App">

        <Route exact path="/" component={Projects} />
        <Route path="/articles" component={Articles} />
        <Route path="/about" component={About} />

        <div className="navigation">
          <img src={logo} className="logo" alt="Logo Image" />
          <div className="navigation-sub">

            <Link to="/" className="item">Projects</Link>
            <Link to="/articles" className="item">Articles</Link>
            <Link to="/about" className="item">About</Link>

          </div>
        </div>
      </div>
    </BrowserRouter>
  );
}

export default Navbar;

从“React”导入React；
导入“./App.scss”
从“/logo.svg”导入徽标；
从“react router dom”导入{BrowserRouter，Route，Link}；
从“/Projects.js”导入项目；
从“/Articles.js”导入文章；
从“/About.js”导入About；
函数Navbar（）{
返回(
项目
文章
关于
);
}
导出默认导航栏；

App.js

import React from 'react';
import Navbar from './Navbar.js'
function App() {
  return (
    <div className="App">
      <Navbar />
    </div>
  );
}

export default App;

从“React”导入React；
从“./Navbar.js”导入导航栏
函数App（）{
返回(
);
}
导出默认应用程序；

这里是一个使用JSX创建的其他页面的示例，如果我不呈现另一个页面，则导航栏位于顶部，但一旦呈现其他页面中的一个，导航就会呈现在底部

Projects.js

import React from "react";
import Thumbnail from './Thumbnail.js';
import './App.scss';

function Projects(props) {
  return (
    <div>
      <h1 class='page-title'>Projects</h1>
      <div className='divider'></div>
      <div className="projects">
         <Thumbnail link="/twitter" image="https://pbs.twimg.com/profile_banners/320887062/1552390646/600x200" title="Twitter Newsfeed" category="Mobile App" />
         <Thumbnail  link="/airbnb"  image="https://image.shutterstock.com/z/stock-photo-kiev-ukraine-april-airbnb-logo-sign-on-pc-sign-airbnb-an-online-platform-for-274367297.jpg"  title="Airbnb Experiences"  category="Website" />
         <Thumbnail  link="/photoshop"  image=""  title="Photoshop Redesign"  category="Desktop App" />
         <Thumbnail link="/twitter" image="https://pbs.twimg.com/profile_banners/320887062/1552390646/600x200" title="Twitter Newsfeed" category="Mobile App" />
         <Thumbnail  link="/airbnb"  image="https://image.shutterstock.com/z/stock-photo-kiev-ukraine-april-airbnb-logo-sign-on-pc-sign-airbnb-an-online-platform-for-274367297.jpg"  title="Airbnb Experiences"  category="Website" />
         <Thumbnail  link="/photoshop"  image=""  title="Photoshop Redesign"  category="Desktop App" />
         <Thumbnail  link="/airbnb"  image="https://image.shutterstock.com/z/stock-photo-kiev-ukraine-april-airbnb-logo-sign-on-pc-sign-airbnb-an-online-platform-for-274367297.jpg"  title="Airbnb Experiences"  category="Website" />
         <Thumbnail  link="/photoshop"  image=""  title="Photoshop Redesign"  category="Desktop App" />
      </div>
    </div>
  )
}

export default Projects;

从“React”导入React；
从“/Thumbnail.js”导入缩略图；
导入“/App.scss”；
功能项目（道具）{
返回(
项目
)
}
导出默认项目；

将路线移动到导航栏下方

function Navbar() {
      return (
        <BrowserRouter>
          <div className="App">

            <div className="navigation">
              <img src={logo} className="logo" alt="Logo Image" />
              <div className="navigation-sub">

                <Link to="/" className="item">Projects</Link>
                <Link to="/articles" className="item">Articles</Link>
                <Link to="/about" className="item">About</Link>

              </div>
            </div>
            <Route exact path="/" component={Projects} />
            <Route path="/articles" component={Articles} />
            <Route path="/about" component={About} />
          </div>
        </BrowserRouter>
      );
    }

    export default Navbar;

函数导航栏（）{
返回(
项目
文章
关于
);
}
导出默认导航栏；

将路线移动到导航栏下方

function Navbar() {
      return (
        <BrowserRouter>
          <div className="App">

            <div className="navigation">
              <img src={logo} className="logo" alt="Logo Image" />
              <div className="navigation-sub">

                <Link to="/" className="item">Projects</Link>
                <Link to="/articles" className="item">Articles</Link>
                <Link to="/about" className="item">About</Link>

              </div>
            </div>
            <Route exact path="/" component={Projects} />
            <Route path="/articles" component={Articles} />
            <Route path="/about" component={About} />
          </div>
        </BrowserRouter>
      );
    }

    export default Navbar;

函数导航栏（）{
返回(
项目
文章
关于
);
}
导出默认导航栏；

你能分享你的导航栏css和应用程序css吗？你能分享你的导航栏css和应用程序css吗？