<link />，<navlink>组件在div中使用相对定位时不会更新URL

Question

导航链接不会在悬停时加下划线，并且在样式div内时不会更新URL。

当我将主div中的position属性更改为绝对值时，背景图像不再覆盖链接，现在可以单击链接并更改URL。 div外部的链接始终有效。删除className =“ splash-img”也可以解决该问题。

import {
  BrowserRouter as Router,
  Route,
  NavLink
} from "react-router-dom";

    class Splash extends Component {
      state = {};

      render() {
        return (
          <Router>
            <NavLink to="/Bars">Bars</NavLink>
            <div className="splash-img">
                <NavLink to="/Bars">Bars</NavLink>
                <NavLink to="/Beers">Beers</NavLink>
                <NavLink to="/Drinkers">Drinkers</NavLink>
            </div>
          </Router>
        );
      }
    }

    export default Splash;

这是外部div的CSS

.splash-img {
  background-image: url("../images/beers-snacks.jpg");
  background-size: cover;
  background-position: center center;
  position: relative;
  top: 0;
  bottom: 0;
  max-width: 100%;
  height: 100vh;
  z-index: -10;
}

我几乎不做任何WebDev，所以很可能我只是不了解反应的工作原理。