React从入门到放弃之前奏(5):ReactRouter4

安装:npm i -S react-router react-router-dom

GitHub:ReactTraining/react-router

React Router中有三种类型的组件:路由器组件(BrowserRouter),路由匹配组件(Route)和导航组件(Link)。

路由器

每个React Router应用程序的核心应该是一个路由器组件。

对于Web项目,react-router-dom提供BrowserRouter和HashRouter路由器。

路由匹配组件

Route:

path路径(string): 路由匹配路径。(没有path属性的Route 总是会 匹配);
exact精准(bool):为true时,则要求路径与location.pathname必须完全匹配;
strict严格(bool):为true时,有结尾斜线的路径只能匹配有斜线的location.pathname;

strict示例:

路径 location.pathname strict 是否匹配
/one/   /one   true    
/one/   /one/   true    
/one/   /one/two   true    
导航组件

Link:在应用中,提供导航功能

NavLink:Link的一个特殊版本,当匹配指定URL的时候,会给元素添加style

示例:

<Link to="/profile"/> <NavLink to="/profile" activeStyle={{color:'red'}}/>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzxyzp.html