react 自定义Link

image.png
在这个导航里面, 没有使用NavLink, 使用的是自定义的MenuLink.
MenuLink其实就就是一个函数, 返回并导出了一个Route, 只是根据对react某些特性的合理使用, 就成了自定义的Link了.

const MenuLink = ({to, ...props}) => {
    return (
        <Route path={to} {...props} children={(p) => {
            return <span onClick={()=> p.history.push(to)}
                         className={p.match ? 'active' : ''}
            >{ props.children }</span>
        }}/>
    )
}

{to, ...props} 解构赋值, 多次调用了MenuLink这个组件, 所以如果我们打印一下to的话, 会出现四个(因为被调用了四次)路径, 分别是/, /activities, /topic, /login, 所以在这里把每一个to绑定在返回的Route上.

{...props}: 将在调用MenuLink的时候绑定的所有props, 原封不动的放到返回的Route上.

children: 是react-router上的第三个可以用来渲染东西的方法, 路由相关的props, 即(history, location, match)都会被当做参数传递给这个方法. 在里面调用.

p.match ? 'active' : '': 如果匹配上的路由, 添加active样式类. 注意, 在这里打印 p.match 的话是没有结果的, 结果是null