react router 4.0以上的路由应用详解


Posted in Javascript onSeptember 21, 2017

本文介绍了react router 4.0以上的路由应用,分享给大家,具体如下:

在4.0以下的react router中,嵌套的路由可以放在一个router标签中,形式如下,嵌套的路由也直接放在一起。

<Route component={App}>
  <Route path="groups" components={Groups} />
  <Route path="users" components={Users}>
   <Route path="users/:userId" component={Profile} />
  </Route>
</Route>

但是在4.0以后,嵌套的路由与之前的就完全不同了,需要单独放置在嵌套的根component中去处理路由,否则会一直有warning:

You should not use <Route component> and <Route children> in the same route

正确形式如下

<Route component={App}>
  <Route path="groups" components={Groups} />
  <Route path="users" components={Users}>
   //<Route path="users/:userId" component={Profile} />
  </Route>
</Route>

上面将嵌套的路由注释掉

const Users = ({ match }) => (
 <div>
  <h2>Topics</h2>
  <Route path={`${match.url}/:userId`} component={Profile}/>
 </div>
)

上面在需要嵌套路由的component中添加新的路由

一个完整的嵌套路由的例子如下

说明及注意事项

1.以下代码采用ES6格式

2.react-router-dom版本为4.1.1

3.请注意使用诸如HashRouter之类的history,否则一直会有warning,不能渲染

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
// import { Router, Route, Link, Switch } from 'react-router';
import {
 HashRouter,
 Route,
 Link,
 Switch
} from 'react-router-dom';

class App extends Component {
 render() {
  return (
   <div>
    <h1>App</h1>
    <ul>
     <li><Link to="/">Home</Link></li>
     <li><Link to="/about">About</Link></li>
     <li><Link to="/inbox">Inbox</Link></li>
    </ul>
    {this.props.children}

   </div>
  );
 }
}

const About = () => (
 <div>
  <h3>About</h3>
 </div>
)

const Home = () => (
 <div>
  <h3>Home</h3>
 </div>
)

const Message = ({ match }) => (
 <div>
  <h3>new messages</h3>
  <h3>{match.params.id}</h3>
 </div>
)

const Inbox = ({ match }) => (
 <div>
  <h2>Topics</h2>
  <Route path={`${match.url}/messages/:id`} component={Message}/>

 </div>
) 

ReactDOM.render(
 (<HashRouter>
  <App>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/inbox" component={Inbox} />
  </App>
 </HashRouter>),
 document.getElementById('root')
);

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

Javascript 相关文章推荐
优化javascript的执行速度
Jan 23 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
JS中常用的正则表达式
Sep 29 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
Vue-router 中hash模式和history模式的区别
Jul 24 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
node实现简单的增删改查接口实例代码
Aug 22 Javascript
详解10分钟学会vue滚动行为
Sep 21 #Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 #jQuery
JavaScript实现简单生成随机颜色的方法
Sep 21 #Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 #Javascript
shiro授权的实现原理
Sep 21 #Javascript
AngularJS 的$timeout服务示例代码
Sep 21 #Javascript
JS路由跳转的简单实现代码
Sep 21 #Javascript
You might like
php生成zip压缩文件的方法详解
2013/06/09 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
Python的Django框架下管理站点的基本方法
2015/07/17 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
python字符串连接方法分析
2016/04/12 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
旅游安全协议书
2014/04/21 职场文书
道路施工安全责任书
2014/07/24 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
2014年标准化工作总结
2014/12/17 职场文书
团员年度个人总结
2015/02/26 职场文书
网络销售员岗位职责
2015/04/11 职场文书
实习单位鉴定意见
2015/06/04 职场文书
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js