![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react-router
sJohnny
小小前端
wechat:522407532
展开
-
①react-router4.x使用
react路由的配置:1、找到官方文档 https://reacttraining.com/react-router/web/example/basic2、安装 react-router-dom --save3、找到项目的根组件引入react-router-domimport { BrowserRouter as Router, Route, Link } from "react...原创 2018-10-10 15:55:01 · 195 阅读 · 0 评论 -
②react-router4.x使用 路由传值
react-router 路由传值分为 动态路由传值 和 get传值 两种1、动态路由传值配置:<Route path="/content/:aid" component={Content} /> 对应的动态路由加载的组件里面获取传值// 在组件中通过这种方式获取传来的值this.props.match.params 2、get传值配置:...原创 2018-10-10 16:05:55 · 790 阅读 · 0 评论 -
③react-router4.x使用 js实现路由跳转
实现js跳转路由官方文档:js路由跳转 1、要引入Redirectimport { BrowserRouter as Router,Route, Link, Redirect, withRouter} from "react-router-dom";2、定义一个flagthis.state = { loginFlag:false}; 3、render里...原创 2018-10-10 16:12:56 · 2508 阅读 · 0 评论 -
④react-router4.x 嵌套路由的使用
当遇到以上的情况, content 部分内容需要根据 content menu的点击儿变换,我们就需要用动态路由来实现主要的代码逻辑:用户页面会涉及到路由嵌套入口文件代码:<Router> <div> <header className="title"> <Link to="/">首页组件<原创 2018-10-10 16:31:25 · 928 阅读 · 0 评论 -
⑤react-router4.x 路由模块化
按照之前的写法,我们都是将Route手动填写进去,如果路由变得多,嵌套变得复杂,就会看上去很乱之前的做法:class App extends Component { render() { return ( <Router> <div> <header clas...原创 2018-10-10 17:12:44 · 1086 阅读 · 0 评论