React Router v4中的indexLink

Question

新秀在这里.有没有在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:类型无效 - 期望一个字符串(对于内置组件)或类/函数(对于复合组件)但得到:undefined.您可能忘记从其定义的文件中导出组件检查渲染方法 Nav."

一切都被导出,简单的应用程序完美运行,直到我添加IndexLink.现在传递出来.

Answer 1

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

所以相反,只需使用<NavLink>.

在官方文档上阅读有关NavLink的内容:

NavLink - 一个特殊版本,它将在渲染元素与当前URL匹配时为其添加样式属性.

如果您需要更多地控制URL匹配,可以使用strict或exact道具.

Answer 2

Per Chris,正确答案是继续使用NavLink并使用exact.在这种情况下,严格不起作用.

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

以防其他人遇到这个!