“React Router Active Link CSS” Ответ

Как сделать активную связь с маршрутизатором React

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <NavLink exact={true} activeClassName='is-active' to='/'>Home</NavLink>
        <NavLink activeClassName='is-active' to='/about'>About</NavLink>
      </Nav>

      <Match pattern='/' exactly component={Home} />
      <Match pattern='/about' exactly component={About} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
)

Alive Antelope

React Router Active Link CSS

<NavLink
          key={tab.id}
          className={(navData) =>
            navData.isActive ? styles.activeTab : styles.inactiveTab
          }
          to={tab.path}
        >
          {tab.name}
        
</NavLink>

Tanishq Vyas

реаги-активная ссылка

<NavLink
  to="/faq"
  style={isActive => ({
    color: isActive ? "green" : "blue"
  })}
>
  FAQs
</NavLink>

Crowded Capuchin

Ответы похожие на “React Router Active Link CSS”

Вопросы похожие на “React Router Active Link CSS”

Больше похожих ответов на “React Router Active Link CSS” по JavaScript

Смотреть популярные ответы по языку

Смотреть другие языки программирования

Shell/Bash

C++

CSS

HTML

Java

JavaScript

Objective-C

PHP

Python

Sql

Swift

Ruby

TypeScript

Kotlin

Assembly

VBA

Scala

Rust

Dart

Elixir

Clojure

Haskell

Matlab

Erlang

Cobol

Fortran

Scheme

Perl

Groovy

Lua

Julia

Delphi

Abap

Lisp

Prolog

Pascal

ActionScript

Basic

Solidity

PowerShell

GDScript

Excel