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 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
可以将word转成html的js代码
Apr 11 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
vue2.0 和 animate.css的结合使用
Dec 12 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
JS实现简易日历效果
Jan 25 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 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实现采集程序原理和简单示例代码
2007/03/18 PHP
php面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
javascript数组使用调用方法汇总
2007/12/08 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
Python中常见的数据类型小结
2015/08/29 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
Python常用编译器原理及特点解析
2020/03/23 Python
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
教育英语专业毕业生的求职信
2014/03/13 职场文书
表扬信格式模板
2015/05/05 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
化验室安全管理制度
2015/08/06 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python