单击导航栏按钮时组件不显示

Question

我创建了一个导航栏组件，其中有一些链接。

然后我在我的 App.js 上调用这个组件，这样我就可以显示 NavBar。

当我点击一个链接时，我导航到该路线，但该组件未显示。

这是我的代码：

MainNavigation.js

import {
  AppBar,
  Toolbar,
  Typography,
  Button,
} from "@material-ui/core";
import React from "react";
import { Link as RouterLink } from "react-router-dom";
import { useStyles } from "./styles";


function MainNavigation() {
  const classes = useStyles();

  const MyApp = (
    <Typography variant="h6" component="h1"  button='/'>
        <RouterLink to='/' className={classes.logo}>MyApp</RouterLink>
    </Typography>
  );

  const headersData = [
    {
      label: "First",
      href: "/first",
    },
    {
     label: "Second",
     href: "/second"
    }
  ];

  const getMenuButtons = () => {
    return headersData.map(({ label, href }) => {
      return (
        <Button
          {...{
            key: label,
            color: "inherit",
            to: href,
            component: RouterLink,
            className: classes.menuButton,
          }}
        >
          {label}
        </Button>
      );
    });
  };

  const displayDesktop = () => {
    return (
      <Toolbar className={classes.toolbar}>
        {MyApp}
        <div>{getMenuButtons()}</div>
      </Toolbar>
    );
  };

  return (
    <header>
      <AppBar className={classes.header}>{displayDesktop()}</AppBar>
    </header>
  );
}

export default MainNavigation;

App.js

import './App.css';
import { Route, Routes } from 'react-router-dom';
import Second from './pages/Second';
import First from './pages/First';
import Home from './pages/Home';
import MainNavigation from './components/layout/MainNavigation';

function App() {
  return (
    <div>
       <MainNavigation/>
        <Routes>
          <Route path="/" exact element={<Home />} />
          <Route path="/first" element={<First />} />
          <Route path="/second" element={<Second />} />
        </Routes>
    </div>
  );
}

export default App;

Second.js

function Second() {
    return <div>Second</div>;
}

export default Second

当我单击链接时会调用组件，因为我登录控制台只是为了检查。 我不知道发生了什么，因为我没有收到任何错误，任何线索？

Answer 1

我没有看到您的路由/导航实现有任何明显的问题，它工作得很好......

但是

您应该知道AppBar 组件默认使用固定定位，因此它实际上会覆盖您的内容。

AppBar props

您可以使用其他位置值并使应用栏与内容一起呈现（可能不是您想要的应用标题），或者您可以将margin-top 应用到您的内容以将它们推到应用栏标题下方。

例子：

h1.header {
  margin-top: 5rem;
  height: 200vh;
}