NavLinkの使用

3828 ワード
React navlink category react router dom テキストリンク
質問する
必要なカテゴリをクリックすると、選択したカテゴリにCSSを入力します.
既存のコード
Nav.js
<div className="navBottom">
  <ul className="categoryList">
    {CATEGORIES.map((CATEGORY, i) => (
      <Category category={CATEGORY} key={i} />
    ))}
  </ul>
</div>
  • カテゴリのURLとタイトルが存在するCATEGORIESという定数データを受信し、カテゴリコンポーネントに渡した.
    • Category.js
    import React from 'react';

const Category = ({ category }) => {
  return (
    <li>
      <Link to={category.url}>
        {category.title}
      </Link>
    </li>
  );
};

export default Category;
  • は受け取った道具を所望の場所に安置した.
  • カテゴリ(title)をクリックし、設定したURLに移動します.
  • また問題解決のためにどのような方法を使うべきか?初めて見た機能があるので使うことにしました.
    • 解決する
    Category.js
    import React from 'react';
import { NavLink } from 'react-router-dom';

const Category = ({ category }) => {
  return (
    <li>
      <NavLink
        to={category.url}
        className={({ isActive }) =>
          isActive ? 'categoryActive' : 'categoryTitle'
        }
      >
        {category.title}
      </NavLink>
    </li>
  );
};

export default Category;
  • NavLinkが見つかり、利用しました.
  • NavLinkを使用すると、classNameをコールバック関数を使用して条件付きでレンダリングできるisActiveというツールが表示されます.
    • [プログラマー]宝くじの最高と最低python
    VueプロジェクトはIE 11でデータ変更後ページデータに変化なし