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 打开窗口返回值实现代码
Mar 04 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
有关json_decode乱码及NULL的问题
Oct 13 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
node.js爬虫爬取拉勾网职位信息
Mar 14 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 Javascript
微信小程序实现首页弹出广告
Dec 03 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
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
Javascript之文件操作
2007/03/07 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
js调用图片隐藏&amp;显示实现代码
2013/09/13 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
深入探讨前端框架react
2015/12/09 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
用Python编写简单的定时器的方法
2015/05/02 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
python:接口间数据传递与调用方法
2018/12/17 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
Keras自定义IOU方式
2020/06/10 Python
如何利用find命令查找文件
2016/11/18 面试题
公司同意接收函
2014/01/13 职场文书
酒店前台岗位职责
2015/04/16 职场文书
美丽的大脚观后感
2015/06/03 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers