我有一个React应用，但是由于任何原因，导航栏卡在页面底部而不是标题中

Question

我在react应用程序中有一个导航栏组件，但由于某种原因，它在页面底部而不是在我希望的页面顶部呈现。我尝试将导航放置在单独的标头中，并将绝对顶部放在该标头上，但这也没有解决。代码在下面。

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;

App.js

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

export default 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应用程序中有一个导航栏组件，但由于某种原因，它在页面底部而不是在我希望的页面顶部呈现。我曾尝试将导航仪放在单独的...

Answer 1

将路线移动到导航栏下方。