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 相关文章推荐
arguments对象
Nov 20 Javascript
Javascript 获取链接(url)参数的方法
Feb 15 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
jquery实现手风琴效果
Nov 20 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
JavaScript布尔运算符原理使用解析
May 06 Javascript
Vue实现可移动水平时间轴
Jun 29 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.MVC的模板标签系统(五)
2006/09/05 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
javascript 数组学习资料收集
2010/04/11 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
Python获取文件所在目录和文件名的方法
2017/01/12 Python
Python线程创建和终止实例代码
2018/01/20 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
Python实现Linux监控的方法
2019/05/16 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
个性大学生自我评价
2013/12/04 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
干部作风建设心得体会
2014/10/22 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript