gpt4 book ai didi

ReactJS - 标记上的未知属性 `activeClassName`。从元素中删除此 Prop

转载 作者:行者123 更新时间:2023-12-03 13:21:24 25 4
gpt4 key购买 nike

我正在使用react 15.4.2和react-router4.0.0,这个项目是用Create React App引导的.

这是我的代码。

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')
);

当我浏览 /about 时,出现此错误:

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

我在这里做错了什么?

谢谢!

最佳答案

从react-router的v6开始,将activeClassName替换为className并使用navData.isActive切换样式.

<小时/>

旧方法:

<NavLink to="/home" activeClassName="active-style">Home</NavLink>

v6 及以上版本:

<NavLink to="/home" className={(navData) => (navData.isActive ? "active-style" : 'none')}>Home</NavLink>

或者您也可以从 navData 解构 isActive:

 <NavLink to="/home" className={({isActive}) => (isActive ? "active-style" : 'none')}>Home</NavLink>

关于ReactJS - <a> 标记上的未知属性 `activeClassName`。从元素中删除此 Prop ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43146460/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com