安装: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'}}/>