CSS 模块在使用 react-router-dom 的导航栏上 "undefined"

Question

我正在制作一个 React 应用程序，它有一个成功的基于 React-router 的导航栏。我使用 CSS 模块来划分有帮助的样式。我弄乱了 React-PDF，在将其从我的代码中删除后，我的导航栏现在不再正确显示。它只显示一个 link 并且在开发工具上，导航栏和其中的组件的 CSS 是“未定义的”。我想知道如何恢复正常。

下面是我的代码。

Nav.js

import React from 'react';
import { BrowserRouter as NavLink } from 'react-router-dom';

import navstyles from './navstyles.module.css';

function Nav() {
    return (
        <div>
            <nav className={`${navstyles.navbar}`}>
                <h2 className={`${navstyles.navboxhome}`}>
                    <NavLink
                        exact to="/"
                        activeStyle={{
                            fontWeight: "bold",
                            color: "blue"
                        }}
                    >
                        Home
                    </NavLink>
                </h2>
                <h2 className={`${navstyles.navboxstories}`}>
                    <NavLink
                        exact to="/stories"
                        activeStyle={{
                        fontWeight: "bold",
                        color: "blue"
                    }}
                    >
                        Stories
                    </NavLink>
                </h2>
                <h2 className={`${navstyles.navboxcontact}`}>
                    <NavLink
                        exact to="/contact"
                        activeStyle={{
                        fontWeight: "bold",
                        color: "blue"
                    }}
                    >
                        Contact
                    </NavLink>
                </h2>
            </nav>
        </div>
    );
};

export default Nav;

navstyles.module.css

.navbar {
    display: grid;
    width: 100%;
    height: 10vh;

    grid-template-columns: repeat(3, 1fr);
}

[class^="navbox"] {
  background-color: greenyellow;
  border-radius: 1px;
  border-color: black;
  border: 2px;
  border-style: solid;
  display: grid;

/* To place the letter at the center */
  place-items: center;
}

.navboxhome {
  background-color: skyblue;
  display: grid;
  place-items: center;
}

.navboxstories {
  background-color: skyblue;
  display: grid;
  place-items: center;
}

.navboxcontact {
  background-color: skyblue;
  display: grid;
  place-items: center;
}

App.js

import './App.css';

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Nav from './Components/Nav';
import Footer from './Components/Footer';

import Stories from './Pages/Stories';
import Contact from './Pages/Contact';

function App() {
  return (
    <Router>
      <div className="container">
        <div className="navigation">
          <Nav />
        </div>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/stories" exact component={Stories} />
          <Route path="/contact" exact component={Contact} />
        </Switch>
        <div className="bottom">
          <Footer />
        </div>
      </div>
    </Router>
  );
}

const Home = () => (
  <div className="subcontainer">
    <div className="box-2">B</div>
    <div className="box-3">C</div>
    <div className="box-4">D</div>
    <div className="box-5">E</div>
    <div className="box-6">F</div>
  </div>
);


export default App;

Answer 1

在nav.js中替换

import { BrowserRouter as NavLink } from 'react-router-dom';

和

import { NavLink } from 'react-router-dom';

因为 BrowserRouter 不用于创建 link，而是用于包装您的应用程序，以便您可以在 react-routed-dom 中使用导航组件（例如 NavLink 或 Link).

https://reactrouter.com/web/api/BrowserRouter

CSS 模块在使用 react-router-dom 的导航栏上 "undefined"

CSS modules are "undefined" on navigation bar that uses react-router-dom

reactjs

react-router

react-router-dom

react-css-modules