本文主要和大家介绍react router 4.0以上的路由应用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
在4.0以下的react router中，嵌套的路由可以放在一个router标签中，形式如下,嵌套的路由也直接放在一起。
登录后复制
但是在4.0以后，嵌套的路由与之前的就完全不同了，需要单独放置在嵌套的根component中去处理路由，否则会一直有warning:
You should not use and in the same route
正确形式如下
//
登录后复制
上面将嵌套的路由注释掉
const Users = ({ match }) => (
Topics
)
登录后复制
上面在需要嵌套路由的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 (
App
登录后复制 Home About Inbox {this.props.children} ); }}const About = () => (
About
)const Home = () => (
Home
)const Message = ({ match }) => (
new messages
{match.params.id}
)const Inbox = ({ match }) => (
Topics
) ReactDOM.render( ( ), document.getElementById(‘root’));
相关推荐：
react-router4 配合webpack require.ensure 实现异步加载
以上就是react router4.0以上的路由使用方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2787543.html
