javascript - 我有一个 react 应用程序，但无论出于何种原因，导航栏卡在页面底部而不是标题中

Question

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

导航栏.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 创建的其他页面之一的示例，如果我不渲染另一个页面，导航栏位于顶部，但一旦渲染其他页面之一，导航栏就会渲染在底部。

元素.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

将您的路线移至导航栏下方。

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;