Reactstrap и React-router 4.0.0-beta.6 - active <NavLink>

Question

Я использую Reactstrap и React-router 4.0.0-beta.6 в учебном проекте, который находится на gitlab с пользовательским доменом.
Согласно Reactstrap документации: это способ, которым я должен использовать активный navlink

import { NavLink } from 'reactstrap' 
    ... 
    <NavLink href="#" active = true >Link< /NavLink> 

Согласно React-маршрутизатор v4 документы:

import { NavLink } from 'react-router-dom' 
    ... 
    <NavLink to="/about" activeClassName="active">About</NavLink> 

Так как я должен делать осуществлять navlink активное состояние и использование реагируют-маршрутизатор?

Answer 1

Чтобы использовать оба варианта, вам нужно будет переименовать один из этих импортов и использовать опору тега в реалстрате NavLink. Вы не сможете использовать активную опору для реагирования на NavLink, потому что эта логика существует в ответном маршрутизаторе NavLink.

Вот что он должен выглядеть следующим образом:

import { NavLink } from 'reactstrap'; 
import { NavLink as RRNavLink } from 'react-router-dom'; 

<NavLink to="/about" activeClassName="active" tag={RRNavLink}>About</NavLink> 

Больше информации здесь: используется https://github.com/reactstrap/reactstrap/issues/336

Answer 2

По умолчанию active класс. Вы можете просто использовать свойство exact boolean для соответствия точному пути.

import { NavLink } from 'reactstrap'; 
import { NavLink as RRNavLink } from 'react-router-dom'; 

<NavLink exact to="/about" tag={RRNavLink}>About</NavLink> 

Посмотрите на исходный код реагировать-router.NavLink компонент: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js

Answer 3

Мой совет, чтобы избежать <Link>, <NavLink> и tag все вместе при работе с React Router v4 и Reactstrap (Бутстрап). Я действительно думаю, что все три должны быть устаревшими, особенно атрибут tag. Попытка смешать React Router's <Link> и <NavLink> с компонентами Reactstrap приводит к непредвиденным проблемам стиля с Bootstrap (например: https://github.com/reactstrap/reactstrap/issues/562).

Я нашел, что с точки зрения стиля лучше использовать компонент React Router v4 <Route> и передать опору history компоненту Reactstrap.

import { Route } from 'react-router-dom'; 
import { Button } from 'reactstrap'; 

<Route 
    render={props => 
    <Button role="button" 
     onClick={() => props.history.push("/endpoint")}> 
    </Button>} 
    />