Блог

Я создал компонент панели навигации, в котором у меня есть несколько ссылок.

Затем я вызываю этот компонент на своем App.js , так что я могу отобразить панель навигации.

Когда я нажимаю на ссылку, я перехожу к маршруту, но компонент не отображается.

Вот мой код:

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
 

Компонент вызывается, когда я нажимаю на ссылку, потому что я вошел в консоль только для проверки.
Я не знаю, что происходит, поскольку я не получаю никаких ошибок, никаких подсказок?

Я не вижу никаких явных проблем с вашей реализацией маршрутизации / навигации, она работает просто отлично…

НО

Вы должны знать, что AppBar компонент по умолчанию использует фиксированное позиционирование, поэтому он фактически перекрывает ваш контент.

Реквизит панели приложений

Вы можете либо использовать какое-либо другое значение позиции и заставить панель приложений отображать содержимое (возможно, не то, что вы хотите в заголовке приложения), либо вы можете margin-top применить к своему содержимому, чтобы поместить его ниже заголовка панели приложений.

Пример:

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