是写给自己看的，可能有些难读懂有点乱糟糟，但是没关系，我自己明白是咋回事就行。勿喷。

路由属性

function User(props){
    console.log(props)//location history match
    const {history,location,match} = props //解构出来
    分别打印一下
    return <h1>123</h1>
}
render(){
 return(
   <Router>
       <Link to="/user">User</Link>
       <Route path="/user" component={User} />
    </Router>
 )
}

先打印props:

可以看到三个属性分别是：history，location，match。

分别展开查看：

history中：

location中：

match中：（params路由参数(:id=123)，path(Route中),url(Link中).）

路由嵌套：

在home下嵌套home1,home2,home3.

由于home为公共部分，于是选择抽离出来。

 <Route path="/home" component={Topic}/>
 当路由为home时，显示Topic组件。
 function Topic(props){
  const {path,url} = useRouteMatch() //获取path和url
  const {path,url} = props.match //这也是一种方法哈，解构的是父组件中的url
  return(
    <BrowserRouter>
      <ul>   
      <li><Link to={`${url}/home1`}>home1</Link></li> //抽离出来
      <li><Link to="/home/home2">home2</Link></li>
      <li><Link to="/home/home3">home3</Link></li>
      </ul>
      <Switch>
      <Route path={`${path}/:home`} component={Topic}/> //抽离出来
      </Switch>
      </BrowserRouter>
  )
}

哪一个触发了子组件，path和url就是哪个父组件传过来的。

path和url不要搞混：path为Route中的路径；url为Link中的路径或浏览器中的地址.

默写: 如下：：：：：心情好烦躁，可能因为明天要早起去机场，回学校坐LAO。

<Link to="/topics">Topics</Link>
<Route path="/topics" component={Topics}></Route>

function Topics(props){
  const {path,url} = useRouteMatch() //获取path和url
    const {url,path} = props.match
    return(
      <div>
          <Link to="/topic/home">
            topic/home1
          </Link>
           <Link to="/topic/home1">
            topic/home2
          </Link>
           <Link to=`${url}/home`>
            topic/home
          </Link>
           <Link to=`${url}/home1`>
            topic/home
          </Link>
          <Route path="/topic/:home" component={Topic}/>
          <Route path=`${path}/:home` component={Topic}/>
      </div>
    )
}

function Topic(props){
    const {home} = props.match //在这里就可以拿到：home的值了，为home与home1
    return(
      <h1> {home} </h1> //这里分别显示home与home1
    )
}

不想写这里了，有点烦。

续更

路由导航

link和a标签的区别;

当点击a标签和link标签时都会改变url，但：

点击相同a标签时，href值相同，但整个页面也刷新，url会更新。

点击不同a标签页面时，整个页面也会刷新。

但是如果用link，点击相同url，整个页面不会重新加载，url不会更新，非常nice。

function Users() { 
   const {id} = useParams()
   const {search} = useLocation()
   console.log(id,"id");
   console.log(search,"search");
   return <h1>component</h1>
 }
 <li>
        <Link to="/users/123">
          User  //id为123，search无
        </Link>
</li>
<li>
        <Link to="/users/123?sort=123">
          User //id为123，search为 ？sort=123
        </Link>
</li>
 <Route path="/users/:id/" component={Users}/>

当点击这两个链接时：

分别用两个钩子函数取出params和search

高亮

引入新的组件NavLink

          <li>
        <NavLink to="/a"  activeStyle={{fontWeight:"bold",color:"red"}} exact >
          User
        </NavLink>
        </li>
        <li>
        <NavLink to="/b"  activeStyle={{fontWeight:"bold",color:"red"}} exact>
          User
        </NavLink>
        </li>

可以看到当路径为a和b时，分别做了精确匹配，点击时，会触发activeStyle的样式风格，实现渐变、加粗、颜色等等效果。

今天状态不好，就写到这里吧。

18-路由嵌套钩子与导航

路由属性

路由嵌套：

路由导航

高亮