У меня есть приложение реакции, но по какой-то причине Навбар застрял внизу страницы, а не в шапке

Question

У меня есть компонент 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;

Приложение. js

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

export default App;

Вот пример одной из других страниц, созданных с использованием JSX, панель навигации находится вверху, если я не отображаю другую страницу, но как только одна из страниц отображается, навигация отображается внизу.

Проекты. 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;

Answer 1

Переместите ваши маршруты ниже 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;