企业门户网站模板分享,网站活动平台推广计划,it运维服务内容,给装修公司做网站一、简介 react router是一个构建基于react应用的路由管理库。允许你在程序中定义不同的路由和导航规则。以实现不同的url路径显示不同的组件。
二、相关技术
Routerdivul id menuliLink to /homeHomeRouterdivul id menuliLink to /homeHome/Link/liliLink to /helloHello/Link/liliLink to /aboutAbout/Link/li/uldiv id page-containerRoute path /home component {Home} /Route path /hello component {Hello} /Route path /about component {About} //div/div
/Router
Link - 导航跳转组件
Router - 路由配置
1.React Router API
Link - Link to /aboutAbout/Link 普通连接不会触发浏览器刷新
NavLink - NavLink to /about activieClassName selectedAbout/NavLink
Prompt - Prompt when {fromIsHalfFilledOut} message Are you sure you want to leave/
Redirect - Route exact path / render {() (loggedIn ? (Redirect to /dashboard/):(PublicHomePage/))} /
2.url传参
react 组件可以通过 match props 获取Route 中url对应的占位符值。
// 通过match属性获取Route Path中的占位符值
const Topic ({match}) (h1Topic {match.params.id}/h1
); export default class RouterParams extends React.PureComponent{render(){return (Routerdivul id menuliLink to /topic/1Topic 1/Link/liliLink to /topic/2Topic 2/Link/liliLink to /topic/3Topic 3/Link/li/uldiv id page-containerRoute path /topic/:id component {Topic} //div/div/Router);}}
默认情况下直接修改浏览器地址是不会触发跳转的必须通过Link或者其它React routeApi实现跳转。
3.嵌套路由
1.每个React组件都是路由容器。
2.React Router的声明式语法可以方便的定义嵌套路由。
举个多级目录嵌套路由例子
// 一级目录
export const Category () {return () {Routerdivul id menuliLink to /category/1Category 1/Link/liliLink to /category/2Category 2/Link/liliLink to /category/3Category 3/Link/li/uldiv id nav-containerRoute path /category/:id component {SubCategory}/div/div/Router}
}// 二级目录
export const SecondCategory ({match}) {return () {Routerdivul id menuliLink to /category/${match.params.id}/sub/1Category 1/Link/liliLink to /category/${match.params.id}/sub/2Category 2/Link/liliLink to /category/${match.params.id}/sub/3Category 3/Link/li/uldiv id page-containerRoute path /category/:id/sub/:subId component {Page}/div/div /Router}
}// 页面内容
export const Page ({match}) {const data getPageData(match.params.id, match.params.subid);return parseData(data);
} 4.React router全局配置 feature1/route.js
import Feature1Component from ./FeatureComponent;const routes [{path: /feature1,component: Feature1Component,exact: true}
];export default routes;
route-config.js
import feature1Routes from ./feature1/route
import feature1Routes from ./feature2/route
const routes [...feature1Routes,...feature2Routes,
]
App.js
import {BrowserRouter as Router, Route, Switch} from react-router-dom
const App () {return (RouterSwitch // 路由选择{routes.map({route,index}{Route key {index}path {route.path}exact {route.exact} // 精确匹配render {props route.component {...props}//})}/Switch/Router);
}
