React Router v4 中的 indexLink答案

【问题标题】：indexLink in React Router v4React Router v4 中的 indexLink
【发布时间】：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 之前，这个简单的应用程序运行良好。现在要昏倒了。

【问题讨论】：

【解决方案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>

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

【讨论】：