探讨Link与NavLink
<Link>:
<Link>
是一个元素,允许用户通过单击或点击它来导航到另一个页面,渲染在页面,我们可以看见它自动转换成<a href>标签,并没有点击样式
import React, { Component } from 'react' import { Link } from 'react-router-dom' export default class App extends Component { render() { return ( <div> <Link className="list-group-item" to="/about">About</Link> <Link className="list-group-item" to="/home">Home</Link> </div> ) } }
我们可以看出在页面中没有点击导航高亮显示效果的
<NavLink>:
<NavLink>在构建导航菜单时,它会自动显示当前选择了哪项菜单,渲染到页面成<a href>并自动添加了一个active的类名
import React, { Component } from 'react' import { NavLink } from 'react-router-dom' export default class App extends Component { render() { return ( <div> <NavLink className="list-group-item" to="/about">About</NavLink > <NavLink className="list-group-item" to="/home">Home</NavLink > </div> ) } }
我们可以看到在页面点击导航高亮显示效果的
修改默认点击样式
修改默认的点击样式,选中菜单的样式,例如修改背景色
在react-router-dom@6版本以前,例如5.xx版本
<NavLink activeClassName="isactive" className="list-group-item" to="/about">About</NavLink>
// 或者 <NavLink activeStyle={{ background: "green" }} className="list-group-item" to="/home">Home</NavLink>
而在@6版本,已经弃用了 activeClassName 与 activeStyle
<NavLink className={ ({ isActive }) => "list-group-item" + (isActive ? " isactive":"")} to="/about">About</NavLink>
// 或者 <NavLink style={({ isActive }) => ({ color: isActive ? 'green' : 'blue' })} to="/home">Home</NavLink>
如果我们要修改选中样式,会发现每一个NavLink标签有太多重复的内容,这时候就可以对NavLink标签进行二次封装
在页面中直接调用我们封装的NavLink组件
// 封装的NavLink import MyNavLink from './components/MyNavLink' <MyNavLink to="/home">Home</MyNavLink> <MyNavLink to="/about">About</MyNavLink>
在src/components/MyNavLink
在封装的NavLink组件中,打印传递过来的props,可以发现标签中的,内容直接以children存在props中
import React, { Component } from 'react' import { NavLink } from 'react-router-dom' export default class MyNavLink extends Component { render() { console.log(this.props); return ( <NavLink className={ ({isActive}) => "list-group-item" + (isActive ? " isactive":"")} {...this.props} /> ) } }