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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
Jquery注册事件实现方法
May 18 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 Javascript
Vue 同步异步存值取值实现案例
Aug 05 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 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并发对MYSQL造成压力的解决方法
2013/02/21 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
php实现json编码的方法
2015/07/30 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
浅析javascript中function 的 length 属性
2014/05/27 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
自动化专业个人求职信范文
2013/11/29 职场文书
学生实习介绍信
2014/01/15 职场文书
《囚绿记》教学反思
2014/03/01 职场文书
企业办公室岗位职责
2014/03/12 职场文书
心理健康日活动总结
2014/05/08 职场文书
中层干部培训方案
2014/06/16 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
pytorch实现ResNet结构的实例代码
2021/05/17 Python
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python