web-dev-qa-db-ja.com

indexLink in Reactルーターv4

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のrenderメソッドを確認してください。」

すべてがエクスポートされ、IndexLinkを追加するまで、シンプルなアプリは完全に機能します。さあ、気絶します。

javascriptnode.jsreactjsreact-router
11
DORRITO

<Indexlink>は、RRv4には存在しません。これは、<IndexRoute>と、インデックスの概念全体がRRv4に実際には存在しないためです。リンクとルートは直接関連していることに注意してください。

したがって、代わりに<NavLink>を使用してください。

公式ドキュメントで NavLink について読んでください：

NavLink-現在のURLと一致すると、レンダリングされた要素にスタイリング属性を追加する特別なバージョン。

URLマッチングをさらに制御する必要がある場合は、strictまたはexact小道具を使用できます。

17
Chris

クリスによると、正解は引き続きNavLinkを使用し、exactを使用することでした。この場合、Strictは機能しませんでした。

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

別の人がこれに遭遇した場合に備えて！

10
DORRITO