NavLink не отображает дочерние кнопки в соответствии со стилем css

Question

У меня есть компонент под названием Header, который имеет 2 навигационные ссылки для 2 кнопок добавления и просмотра соответственно. Компонент заголовка является общим для всего приложения, которое было включено в Approutes. js. По какой-то причине второй вид кнопок не отображается в соответствии со стилем css.

Approutes. js

import React from 'react';
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Header from "./Header";
import Home from "./Home";
const Approutes = () => {
  return (
    <BrowserRouter>
      <div>
        <Header/>
        <Switch>
          <Route path="/" component={Home} exact={true} />
        </Switch>
      </div>
    </BrowserRouter>
  );
};

export default Approutes;

Home. js

импортировать React, {Component} из'act ';

class  Home extends Component {

    render() { 
        return ( 
            <div className="home">
            </div>
         );
    }
}

export default Home;

Заголовок. js: -

import { NavLink } from "react-router-dom";
import React, { Component } from "react";

class Header extends Component {

  render() {
    return (
      <div className="header">
        <div className="appTitle">
          <h1>NEW APP</h1>
        </div>
        <div className="navLinks">
          <NavLink
            to="/create"
            className="addBtn"
            activeClassName="activeButton"
          >
            ADD
          </NavLink>
          <NavLink
            to="/view"
            className="viewBtn"
            activeClassName="activeButton"
          >
            VIEW
          </NavLink>
        </div>
      </div>
    );
  }
}


export default Header;

CSS ФАЙЛ: -

.home {
  width: 100vw;
  height: 100vh;
  margin:0;
  padding: 0;

}
.header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0vh;
  left: 3vw;
  border: 2px solid red;
}
.appTitle {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.navLinks {
  margin-top: 3vh;
  width: 95vw;
  border: 2px solid black

}

a:first-child {
  float: left;
}

.addBtn,.viewBtn {
  font-size: 1.5rem;
  height: 6vh;
  width: 47.5vw !important;
  text-decoration: none;
  text-align: center;
  background: skyblue;
  border-top-right-radius: 50px;
  letter-spacing: 1px;
  transition: all 280ms ease-out;
  text-decoration: none;
  outline: none;
  cursor: pointer;
}

.activeButton {
    background: lighten(rgba(7, 116, 241, 0.9), 10%);
    letter-spacing: 1.5px;
    font-size: 2.5rem;
    transition: all 280ms ease-in;
    color: white;
    width: 47.5vw !important;

  }

Просмотр смещения кнопки: -

Answer 1

Скорее всего, проблема здесь:

a:first-child {
  float: left;
}

Ссылка по умолчанию является встроенным элементом (width игнорируется). Когда вы делаете его плавающим, он становится блочным элементом (width работает). Но вы применяете это только к первой ссылке. Попробуйте заменить эту часть на:

.navLinks a {
  float: left;
}

Кроме того, ссылки имеют много состояний . Вам может потребоваться определить стили для каждого состояния, например .viewBtn,.viewBtn:visited,.viewBtn:hover,.addBtnviewBtn:focus,.viewBtn:active,