React路由笔记

1.Link组件

属于路由组件。

导航区：

 <Link to="/xxxxx">Demo</Link>

展示区写Route标签进行路径的匹配

<Route path='/xxxx' component={Demo}/>这个component要小写

2.NavLink使用与封装

NavLink可以实现路由连链接高亮，需要使用activeClassName指定样式。

• 封装：

<NavLink activeClassName=".atguigu" className="list-group-item">

•  二次封装：

为避免重复代码，将navlink内容放在自定义的一般组件MyNavLink中（统一放在Components文件夹中），再将代码进行替换。

/*
<NavLink activeClassName="atguigu" className="list-group-item" to="/Home">Home</NavLink>
*/
<MyNavLink to="/Home" title="Home" />
<MyNavLink to="/About" title="About/>

/*写title传递数据可能过于繁琐，为了与Link组件更相似，可改成如下代码*/
<MyNavLink to="/Home">Home</MyNavLink>
<MyNavLink to="/About">About</MyNavLink>

如to的对象、位置不同，则用props接收/传递。

MyNavLink中定义如下：

export default class MyNavLink extends Component {
	render() {
        
		const {title,to}=this.props
		return (
			<div> /*传递单个数据可以单写一个{to}，很多属性需要设置传递的话，可以将to={to}改成{...this.props}*/
				<NavLink className="list-group-item" to={to}>{title}</NavLink>
			</div>
		)
	}
}

注：title即标签体包含的文字内容也属于props的属性，是一个特殊属性，title => this,props.children,因此也可以不写。反正是可以用滴。

<NavLink className="list-group-item activeClassName="atguigu" {...this.props}></NavLink>

写好了导航区的代码，别忘了展示区的代码呀嘤嘤嘤。

<div className="panel-body">
	<Route path='/home' component={Home}/>
	<Route path='/about' component={About}/>
</div>