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中的一些定位属性[图解]
Jul 14 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
node.js中express中间件body-parser的介绍与用法详解
May 23 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
layui添加动态菜单与选项卡
Jul 26 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
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
php修改时间格式的代码
2011/05/29 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
php适配器模式介绍
2012/08/14 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
layui分页效果实现代码
2017/05/19 Javascript
JS实现基于拖拽改变物体大小的方法
2018/01/23 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
微信小程序定位当前城市的方法
2018/07/19 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
JS实现简单打字测试
2020/06/24 Javascript
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
django实现支付宝支付实例讲解
2019/10/17 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
编写python代码实现简单抽奖器
2020/10/20 Python
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
恒华伟业笔试面试题
2015/02/26 面试题
学校经典推荐信
2013/10/30 职场文书
高中打架检讨书
2014/02/13 职场文书
综合测评个人总结
2015/03/03 职场文书
配置nginx 重定向到系统维护页面
2021/06/08 Servers
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers