React Router v4 中的 indexLink

Posted 2023-02-21

【中文标题】React Router v4 中的 indexLink

【英文标题】：indexLink in React Router v4

【发布时间】：2017-08-14 14:46:40

【问题描述】：

在 React Router v4 中是否有使用 indexLink 的新方法？我正在更新一些版本 3 代码。

我将其引入一些解构：

var NavLink, IndexLink = require('react-router-dom');

并使用 IndexLink 防止它一直变粗：

<h2>Nav</h2>
<IndexLink to="/" activeClassName="active" activeStyle=fontWeight: 'bold'>blah blah blah</IndexLink>
//Other navlinks working fine

IndexLink 是唯一破坏我的代码的东西，这是我将其更改为该代码时出现的错误。

“警告：React.createElement：类型无效——需要一个字符串 （对于内置组件）或类/函数（对于复合 组件）但得到：未定义。您可能忘记导出您的 组件从它定义的文件中。检查渲染方法 Nav。”

所有内容都已导出，在我添加 IndexLink 之前，这个简单的应用程序运行良好。现在要昏倒了。

【问题讨论】：

我真的建议您正确阅读 RRv4 文档 - 新版本中的 API 完全不同。

已经烧了我一两次

在来这里之前我肯定读过书。不过，在不睡觉的情况下通过 docs 和 google 搜索 2 小时可能不符合“适当”的条件！ :D

【参考方案1】：

<Indexlink> 在 RRv4 中不存在，因为<IndexRoute> 和索引的整个概念在 RRv4 中并不真正存在。请记住，链接和路由是直接相关的。

因此，只需使用<NavLink>。

在官方文档上阅读NavLink：

NavLink - 一个特殊版本，当它与当前 URL 匹配时，它将向呈现的元素添加样式属性。

如果您需要对 URL 匹配进行更多控制，可以使用 strict 或 exact 属性。

【讨论】：

谢谢！我仍然需要修复它，但这是我需要知道的要点。在尝试 IndexLink 之前，我实际上将它作为 Navlink。可能是睡眠不足，但我在文档中找不到该索引。欣赏它。

【参考方案2】：

根据 Chris，正确的答案是继续使用 NavLink 并使用 exact。 Strict 在这种情况下不起作用。

<NavLink exact to="/" activeClassName="active" activeStyle=fontWeight: 'bold'>chris is awesome</NavLink>

以防万一其他人遇到这种情况！