NavLink returns 对所有链接都有效，SO 中似乎没有解决方案

Question

似乎 none 其他地方提供的解决方案有效，所以我决定问问。无论我做什么，无论是否处于活动状态，我都无法让 NavLinks 以不同的方式呈现。我直接从 react-router-dom 的文档中关于 NavLinks 的部分获取了三元运算符，我会尝试创建一个函数来避免将所有这些代码写三次，但在此之前我想至少要有正确的渲染工作。

（附带问题：如果我从 return 语句中删除 Router 标签，为什么它会中断？它们在那里是因为，在我需要不同样式的 NavLinks 之前，我使用的是常规路由，但是如果我把它们拿出来，它就会中断并显示一条关于 useHref 的消息，类似的东西）

这是我的 return 声明及其下方的样式组件：

return (
        <>
            <GlobalStyles />
            <Router>
                <Header />
                <Wrapper>
                    <NavBar>
                        <NavLink
                            to="/search"
                            exact
                            className={(isActive) =>
                                "nav-link" + (!isActive ? " inactive" : "")
                            }>
                            Search song
                        </NavLink>
                        <NavLink
                            to="/weekly-thread"
                            exact
                            className={(isActive) =>
                                "nav-link" + (!isActive ? " inactive" : "")
                            }>
                            Weekly thread
                        </NavLink>
                        <NavLink
                            to="/game"
                            exact
                            className={(isActive) =>
                                "nav-link" + (!isActive ? " inactive" : "")
                            }>
                            Game
                        </NavLink>
                    </NavBar>
                </Wrapper>
            </Router>
        </>
    );
};

const Wrapper = styled.div`
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: -1;
`;
const NavBar = styled.div`
    display: flex;
    padding: 20px 20px;
    position: relative;
    gap: 20px;
    font-size: 18px;
    a {
        text-decoration: none;
    }
    .nav-link {
        color: blue;
        &:inactive {
            color: black;
        }
    }
`;

编辑：越来越奇怪了。在甚至简单地粘贴下面答案中的代码但没有得到任何结果之后，我试图弄乱活动 NavLink 的字体大小。令我惊讶的是，现在发生了一些变化，但是以完全奇怪的方式，因为它使第一个元素保持原样，而第二个和第三个元素仅在字体大小方面发生了变化，但没有其他变化。当我单击其他 NavLink 时，URL 发生变化，但它们保持不变：第一个为原始大小，另外两个已更改。

第二次编辑：尝试进一步调试，我对我的一个 NavLinks 做了这个，结果很奇怪：

<NavLink to="/search" exact className={(isActive) => {
    console.log(isActive);
    isActive === false ? console.log(isActive) : console.log("foo");
}}>Search song</NavLink>

现在，第一个 console.log return 是 isActive 的实际值，但第二个和第三个 console.log 总是 return，“foo”，即三元运算符中的第二个值，即使我将“isActive === false”更改为“isActive === true”，也应该交换它们。我不知道这里发生了什么。

Answer 1

路由器

您可能想阅读文档。
primary components 页面解释了您需要路由器的原因。
它为其他组件提供信息； IE当前路线是什么。

导航链接

NavLink 应该能够根据路由器是否与 NavLink[=20= 的 to 属性相匹配，自行设置 active class ]

查看此 CodePen 示例。

请注意，您仍然需要为应用的 class 提供 CSS。如果您使用 bootstrap 或 material-ui 之类的框架；默认情况下，他们通常会有 .active css 样式。

CSS

css 规则可能不正确，&:inactive 处似乎有一个冒号，应该是 .inactive class:

.nav-link {
    color: blue;
    &.inactive {
      color: black;
    }
  }

codepen

Answer 2

在 console.logs 之后，到处都是，有件事引起了我的注意：isActive 作为一个对象出现在控制台上。这就是为什么我总是得到相同的结果。

当我将三元运算符的条件更改为 isActive.isActive ? 时，我开始获得预期的结果。

Answer 3

您应该能够从 NavLink 中删除您的 class姓名属性。

删除：

className={(isActive) =>
    "nav-link" + (!isActive ? " inactive" : "")
}>

这是不必要的，因为 React-Router 已经将 .active class 添加到活动的 link，所以你在做什么属性无疑是在制造怪事。

您可以随意设置 a.active 的样式。

NavLink returns 对所有链接都有效，SO 中似乎没有解决方案

NavLink returns active to all links and no solution in SO seems to work

css

reactjs

conditional-rendering

styled-components

react-navigation

路由器

导航链接

CSS