CSS 模块在使用 react-router-dom 的导航栏上是“未定义的”

Posted 2023-02-21

【中文标题】CSS 模块在使用 react-router-dom 的导航栏上是“未定义的”

【英文标题】：CSS modules are "undefined" on navigation bar that uses react-router-dom

【发布时间】：2021-11-26 05:57:16

【问题描述】：

我正在制作一个基于 react-router 的成功导航栏的 react 应用程序。我使用 CSS 模块来划分有帮助的样式。我弄乱了 React-PDF，从我的代码中删除它后，我的导航栏现在不再正确显示。它只显示一个链接，在开发工具上，导航栏和其中的组件的 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;

【问题讨论】：

也许我误解了这个问题，但我 replicated this on codesandbox 和 css 似乎很好。您导入 BrowserRouter as NavLink 似乎确实存在问题，但这不是 CSS 问题。

这只是有点让人生气。在我的电脑上运行它时，我遇到了这个问题。它发生在我安装 react-pdf 并尝试实现它之后。

也许重新安装 node_modules 并重新启动您的应用程序？

这是我的想法。我认为 react-pdf 改变了一些东西。这样做的最佳方法是什么？

我对 NavLink 导入的观察（我认为不相关）是公认的答案，这让我有点生气。 ;)

【参考方案1】：

在 nav.js 中，替换

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

与

import  NavLink  from 'react-router-dom';

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

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