react-router4 嵌套路由的使用方法


Posted in Javascript onJuly 24, 2017

react我自己还在摸索学习中,今天正好学习一下react-router4 嵌套路由的使用方法,顺便留着笔记

先直接贴代码

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Route, Switch} from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import UserAddPage from './pages/UserAdd/index';
import HomePage from './pages/Home/index';
import HomeLayout from './components/HomeLayout/index';

const hashHistory = createBrowserHistory();
const NoMatch = ({ location }) => (
 <div>
  <h3>无法匹配 <code>{location.pathname}</code></h3>
 </div>
)
ReactDOM.render((
 <Router history={hashHistory}>
  <div>
   <HomeLayout>//总会加载这个组件,并且下面 swicth 里面的组件会在它里面 render 
    <Switch>
     <Route path="/" exact component={HomePage}/>
     <Route path="/user/add" component={UserAddPage}/>
     <Route component={NoMatch}/>
    </Switch>
   </HomeLayout>
  </div>
 </Router>
), document.getElementById('root'));

参考文章:https://stackoverflow.com/questions/42095600/nested-routes-in-v4

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 函数对象的多重身份
Jun 28 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
Mar 28 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
javascript数组快速打乱重排的方法
Jan 02 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
vue-dialog的弹出层组件
May 25 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
关于react-router的几种配置方式详解
Jul 24 #Javascript
简单实现js放大镜效果
Jul 24 #Javascript
Vue列表页渲染优化详解
Jul 24 #Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 #Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 #Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 #Javascript
在React中如何优雅的处理事件响应详解
Jul 24 #Javascript
You might like
PHP生成静态页面详解
2006/11/19 PHP
JS实现php的伪分页
2008/05/25 PHP
fgetcvs在linux的问题
2012/01/15 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
javascript 哈希表(hashtable)的简单实现
2010/01/20 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
关于js类的定义
2011/06/28 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
2017/08/31 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
python lambda的使用详解
2021/02/26 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
品质主管的岗位职责
2013/12/04 职场文书
四年的个人工作自我评价
2013/12/10 职场文书
班组长安全生产职责
2013/12/16 职场文书
公司总经理岗位职责
2014/03/15 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
迟到检讨书范文
2015/01/27 职场文书
英语投诉信范文
2015/07/03 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技