web-dev-qa-db-ja.com

ルートNavlinkは常にアクティブクラスを取得しますReact Router Dom

react-router-dom: 4.2.2を使用しています。現在のURLにactiveClassNameを追加できます。しかし、驚くべきことに、クラスは常にルートURLに追加されます。

以下のスクリーンショットのようなエラーページなどのページにアクセスすると、ホームナビゲーションリンクもactiveClassを取得します。

enter image description here

更新：上記のスクリーンショットでは、http://localhost:3000/#/errorにアクセスしたことを示しました。したがって、active-linkはLove Error? NavLinkにのみ追加する必要があります。しかし、ご覧のとおり、Home NavLinkにも追加されます。

これが私のnavbarコードです：

import React from 'react';
import { NavLink } from 'react-router-dom';

export const NavigationBar = () => (
  <ul className="horizontal-menu">
    <li> <NavLink to = '/' activeClassName="active-link">Home</NavLink> </li>
    <li> <NavLink to = '/about' activeClassName="active-link">About Us</NavLink> </li>
    <li> <NavLink to = '/error' activeClassName="active-link">Love Error?</NavLink> </li>
  </ul>
)

ルーティングには、次のスイッチを使用しました。

<Switch>
  <Route exact path = '/' component = {Home} />
  <Route exact path = '/about' component = {AboutUs} />
  <Route exact path = '/error' component = {Error404} />
  <Route path = "/news/:id" component = {NewsDetail} />
  <Route path="*" component={Error404} />
</Switch>

期待される動作を得るにはどうすればよいですか？

javascriptreactjsreact-router-dom
15
arsho

リンクがアクティブかどうかを確認するには、isActive={}を使用して検証を追加する必要があります。

ドキュメント

動作しています jsFiddle 。 （フィドルは私が作成したものではありません）

追加する必要があるコードは以下のとおりです

Jsfiddleの例

<li><NavLink to="/" isActive={checkActive}>Home</NavLink></li>

コードの変更

<li> <NavLink to='/' activeClassName="active-link" isActive={checkActive}>Home</NavLink> </li>

isActiveプロパティをチェックし、「checkActive」は関数です。

const checkActive = (match, location) => {
    //some additional logic to verify you are in the home URI
    if(!location) return false;
    const {pathname} = location;
    console.log(pathname);
    return pathname === "/";
}

使用できる別の設定は「exact」ですが、jsFiddleでそれを示すことはできません。コードは次のようになると思います

<li> <NavLink exact to='/' activeClassName="active-link">Home</NavLink> </li>

お役に立てれば。さらに詳しい情報が必要な場合はお知らせください。

14
Shashith Darshana

最初のexactの前にactiveClassNameを追加しても機能することがわかりました。したがって、たとえば、次のように設定できます。

export const NavigationBar = () => (
  <ul className="horizontal-menu">
    <li><NavLink to='/' exact activeClassName="active-link">Home</NavLink> 
    </li>
    ....remaining NavLinks
  </ul>
)
14
digitalh2o

次のようなアクティブなクラスにはexactキーワードを使用できます

<NavLink exact to ='/'>Home</NavLink>

それはそのように生成されます

<a href="/" class="active" aria-current="page">Home</a>

あなたが別のページを取得する場合、それはそのようなものになります

<a href="/">Home</a>
4
fool-dev

私は最近この問題に遭遇し、単に追加することで解決しました：

import { withRouter } from 'react-router-dom';

次にコンポーネントをラップします：

export default withRouter(Component);
2
Jango17

コードの変更

<li> <NavLink to='/' activeClassName="active-link" isActive={checkActive}>Home</NavLink> </li>

その後

const checkActive = (match, location) => {
  console.log(location);
  if (!location) return false;
  const { pathname } = location;
  const { url } = match;
  return pathname === url ? true : false;
};
  • 注意 *
const { pathname } = location;
const { url } = match;
return pathname === url ? true : false;
1
kamalesh biswas

私はReactを今学んでいて、ちょうど同じ問題に出くわしました。私は次のことを試みました、そしてそれは私のために働きました。

したがって、3つのナビゲーションリンクがあります。

<li><NavLink to="/home">Home</NavLink></li>
<li><NavLink to="/about">About</NavLink></li>
<li><NavLink to="/contact">Contact</NavLink></li>

しかし、4つのルートを追加しました。

<Route exact path="/" component={Home}></Route>
<Route path="/home" component={Home}></Route>
<Route path="/about" component={About}></Route>
<Route path="/contact" component={Contact}></Route>

同じコンポーネント（ホーム）に2つのルート（/および/ home）を追加しました。このように、react-router-domは、クリックしたリンクにのみ「アクティブ」クラスを追加するように見えます。

0
Aravindh S N R

ホームの場合、Linkの代わりにNavLinkを使用できます。

import { Link } from 'react-router-dom';

<Link to='/'>Home</Link>
0
Aliasghar Soltani