Cài đặt React Router v4 activeClass trên bố mẹ

Question

Không quá quen thuộc với bộ định tuyến phản ứng, nhưng tôi cần chức năng của NavLink để đặt lớp đang hoạt động trên phần tử li mẹ và không phải là phần tử a.

Để thực hiện điều này, tôi chỉ xem mã nguồn của NavLink và sao chép nó vào một phần tử mới. (Ví dụ sử dụng nguyên cảo, nhưng chỉ là về giống như js nào)

import * as React from 'react'; 
import { Link, withRouter, Route } from 'react-router-dom'; 


class LiNavLink extends React.Component<any, {}> { 
    render() { 
     const {to,exact, strict, activeClassName, className, activeStyle, style, isActive: getIsActive, ...rest } = this.props; 
     return (
      <Route 
       path={typeof to === 'object' ? to.pathname : to} 
       exact={exact} 
       strict={strict} 
       children={({ location, match }) => { 
        const isActive = !!(getIsActive ? getIsActive(match, location) : match) 

        return (
         <li 
          className={isActive ? [activeClassName, className].join(' ') : className} 
          style={isActive ? { ...style, ...activeStyle } : style}> 
          <Link 
           to={to} 
           {...rest} 
          /> 
         </li> 
        ) 
       }} 
      /> 
     ); 
    } 
} 

export default LiNavLink; 

Sau đó, sử dụng:

<ul> 
    <LiNavLink activeClassName='active' exact={true} strict to="/example"><span>Active</span></LiNavLink> 
    <LiNavLink activeClassName='active' exact={true} strict to="/example/archived"><span>Archived</span></LiNavLink> 
</ul> 

Tôi đang sử dụng một HashRouter và đối với một số lý do mà tôi không thể tìm ra, điều này không cập nhật khi các tuyến đường thay đổi, chỉ khi tôi khó 'làm mới' trang hiện nó cập nhật như thế nào nên.

Tôi tin rằng nó không bao giờ cập nhật vì đạo cụ không bao giờ thay đổi? Vì vậy, nó không biết để cập nhật chính nó?

Tôi làm cách nào để cập nhật? Hay là vấn đề của tôi ở đâu đó khác?

Answer 1

Tôi thấy rằng bằng cách sử dụng CSS, bạn có thể làm cho liên kết hoạt động mở rộng để điền vào phần tử gốc là <li> bằng cách đặt display:block; trong lớp đang hoạt động.

Ví dụ nếu liên kết của chúng tôi là:

<li> 
    <NavLink to="/overview" className=styles.sideLink activeClassName=styles.sideLinkSelected> 
    Overview 
    </NavLink> 
</li> 

sau đó CSS ​​của chúng tôi sẽ là:

&__sideLinkSelected 
{ 
    background-color: blue; 
    display:block; 
}