CustomLink
概述
CustomLink是对react-router-dom 下面插件Link的扩展,添加了属性render,以及添加了方法isPathEqual,写它的目的如下:
- 我想要连续多次点击某个Link的时候,路由的访问记录不要每次都保存到history中,只保留第一次的就好了
- link我不想写死为一个a标签,我希望其是任意元素或者是任意组合元素,触发方式是任意事件
- 我顺便在demo中写了一个不通过Link的事件来切换路由的办法,我觉得大部分项目中都可能是用得到的
使用示例
;;;;;;const customHistory = ;const CustomLinkExample = { return <div> <Router history=customHistory> <div> <ul> <li> <CustomLink render= { const router = context; const history = router; const location = history; return <button onClick= { const to = "/"; if ! history; else /* //打开这个注释,那么每次都会重新刷新对应的路由组件,否则当连续访问同一个路由则只刷新一次 history.replace(to); */ }>Home</button> } /> </li> <li> <CustomLink render= { const to = "/about"; const router = context; const history = router; const location = history; return <button onClick= { if ! history; else /* //打开这个注释,那么每次都会重新刷新对应的路由组件,否则当连续访问同一个路由则只刷新一次 history.replace(to); */ }>About</button> } /> </li> </ul> <hr /> <Route exact path="/" component=Home /> <Route path="/about" component=About /> </div> </Router> <button onClick= { const to = "/about"; const location = customHistory; if ! customHistory; else /* //打开这个注释,那么每次都会重新刷新对应的路由组件,否则当连续访问同一个路由则只刷新一次 customHistory.replace(to); */ }>跳转到about页</button> </div> }const Home = <div> home </div>const About = { console; return <div> about </div> };