React学习day9-NavLink、路由、params、search、state

封装NavLink

• NavLink可以实现路由链接的高亮，通过activeClassName指定
• 标签体内容是一个特殊的标签属性
• 通过this.props.children可以获取标签体内容

App.js

  <MyNavLink to="/about" >About</MyNavLink>
              <MyNavLink to="/home">Home</MyNavLink>

 {
   /*注册路由*/}
  <Route path="/about" component={
   About}/>
  <Route path="/home" component={
   Home}/>

MyNavLink\index.js

render() {
   
        // const {
   to,title} = this.props
        return(
            <NavLink activeClassName="atguigu" className="list-group-item" {
   ...this.props}/>

        )
    }

Switch的使用

• 通常情况下，path和compoent是一一对应的关系
• Switch可以提高路由匹配效率（单一匹配）。

解决样式丢失

• public/index.html中引入样式时不写 ./ 写 / (常用）
• piblic/index.html 中引入样式时不写 ./ 写 %PUBLIC_URL%(常用）
• 使用HashRouter

路由的精准匹配和模糊匹配

• 默认使用的是模糊匹配&#x