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 相关文章推荐
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
对js关键字命名的疑问介绍
Apr 25 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
怎么理解wx.navigateTo的events参数使用详情
May 18 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 缓存函数代码
2008/08/27 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
详谈PHP文件目录基础操作
2014/11/11 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
python提示No module named images的解决方法
2014/09/29 Python
PyQT实现多窗口切换
2018/04/20 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
python之语音识别speech模块
2020/09/09 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
墨西哥网上购物:Linio墨西哥
2016/10/20 全球购物
八一建军节活动方案
2014/02/10 职场文书
工作检讨书范文
2015/01/23 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
生死抉择观后感
2015/06/09 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python
Java设计模式中的命令模式
2022/04/28 Java/Android