ReactJS - Không xác định prop `activeClassName` trên thẻ <a>. Loại bỏ phần chống đỡ này khỏi phần tử

Question

Tôi đang sử dụng phản ứng 15.4.2 và phản ứng-router4.0.0 và Dự án này đã được khởi động với Create React App.

Đây là mã của tôi.

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './index.css'; 
import {BrowserRouter as Router,Route,Link} from 'react-router-dom' 


const AboutPage =() => { 
return(
    <section> 
     <h2>This is About page</h2> 
     <Link activeClassName="active" to="/about/nestedone">Nestedone</Link> 
     {' '} 
     <Link activeClassName="active" to="/about/nestedtwo">Nested two</Link> 
    </section> 
) 
} 

const HomePage =() => { 
return(
    <section> 
     <h2>This is Home page</h2> 
     <Link to="/about">About</Link> 
    </section> 
) 
} 

const NestedOne =() => { 
return (
    <section> 
     <h2>Nested page 1</h2> 
    </section> 
) 
} 


const NestedTwo =() => { 
return (
    <section> 
     <h2>Nested page 2</h2> 
    </section> 
) 
} 


ReactDOM.render(
<Router> 
    <section> 
    <Route exact path="/" component={HomePage} /> 
    <Route path="/about" component={AboutPage} /> 
    <Route path="/about/nestedone" component={NestedOne} /> 
    <Route path="/about/nestedtwo" component={NestedTwo} /> 
</section> 
</Router>, 
    document.getElementById('root') 
); 

Khi tôi duyệt /about, tôi nhận được lỗi này:

"Warning: Unknown prop activeClassName on tag. Remove this prop from the element.

Tôi đang làm gì sai ở đây?

Cảm ơn!

Answer 1

Thuộc tính activeClassName không phải là tài sản của Liên kết nhưng của NavLink.

Vì vậy, chỉ cần thay đổi mã của bạn để sử dụng NavLink thay vì Link:

const AboutPage =() => { 
return(
    <section> 
     <h2>This is About page</h2> 
     <NavLink activeClassName="active" to="/about/nestedone">Nestedone</NavLink> 
     {' '} 
     <NavLink activeClassName="active" to="/about/nestedtwo">Nested two</NavLink> 
    </section> 
) 

Ghi nhập khẩu NavLink từ react-router-dom:

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

Answer 2

activeClassName không phải là tài sản của Link nhưng là NavLink.

Vì phản ứng-router v4 beta8, thuộc tính là active theo mặc định. Xác minh phiên bản nào được cài đặt trong thư mục mô-đun nút của bạn