Question

我已经在文档和各种论坛中搜索了一段时间，但似乎找不到任何 React Router 组件或可以实现此类功能的解决方法。

与我们拥有 NavLink 组件的方式类似，React Router 规范中是否有任何组件可以在类似程度上用于更改 classNames路由匹配时的 div 元素？

例如：

<Element 
    exact to={["/one", "/two"]} 
    className="default-class" 
    activeClassName="open"
>
    <ChildComponent />
</Element>

它定义了当用户在 /two 或 /two 上时，它将呈现：

<div class="default-class open">
     <!-- child components !-->
</div>

Answer 1

如果我理解正确，您是在尝试根据路由定义 className。您可以使用 react-router 提供的 useLocation 钩子在组件内部完成

import {useLocation} from 'react-router-rom'

const location = useLocation();


if(location =='/one'){
 return SOMETHING
}
else{
    return SOMETHING ELSE
}

Answer 2

我查看了 NavLink 组件的 source code。我的第一个想法是复制并粘贴该代码并将其转换为 withActiveStyling HOC。不幸的是，它使用了一些不是从 'react-router-dom' 包中导出的内部组件，所以它不仅仅是复制和粘贴。但是我们可以将该源用作模板。

此 HOC 接受 NavLink 的所有道具，对 to 进行一些更改：它只接受 string 或 array 或字符串，但不接受函数。

它编辑 className 的属性 style 和 Wrapped Component 以包含 activeClassName 和/或 activeStyle，如果当前位置与 {{1 }} 地点。道具 to、exact 和 strict 将用于确定是否匹配。

sensitive

CodeSandbox Link 带有打字稿注释

根据反应路由器中的路由更改元素的类名

2 个答案: