react-router4 嵌套路由的使用方法

更新时间：2017年07月24日 15:03:45 作者：isykw

本篇文章主要介绍了react-router4 嵌套路由的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

react我自己还在摸索学习中，今天正好学习一下react-router4 嵌套路由的使用方法，顺便留着笔记

先直接贴代码

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Route, Switch} from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import UserAddPage from './pages/UserAdd/index';
import HomePage from './pages/Home/index';
import HomeLayout from './components/HomeLayout/index';

const hashHistory = createBrowserHistory();
const NoMatch = ({ location }) => (
 <div>
  <h3>无法匹配 <code>{location.pathname}</code></h3>
 </div>
)
ReactDOM.render((
 <Router history={hashHistory}>
  <div>
   <HomeLayout>//总会加载这个组件，并且下面 swicth 里面的组件会在它里面 render 
    <Switch>
     <Route path="/" exact component={HomePage}/>
     <Route path="/user/add" component={UserAddPage}/>
     <Route component={NoMatch}/>
    </Switch>
   </HomeLayout>
  </div>
 </Router>
), document.getElementById('root'));

参考文章：https://stackoverflow.com/questions/42095600/nested-routes-in-v4

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

React实现类似于Vue中的插槽的项目实践
本文主要介绍了React实现类似于Vue中的插槽的项目实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05
React之错误边界 Error Boundaries示例详解
这篇文章主要为大家介绍了React之错误边界Error Boundaries示例教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
react-native ListView下拉刷新上拉加载实现代码
本篇文章主要介绍了react-native ListView下拉刷新上拉加载实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
React团队测试并发特性详解
这篇文章主要为大家介绍了React团队测试并发特性详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
解析React中useMemo与useCallback的区别
这篇文章主要介绍了React中useMemo与useCallback的区别,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-08-08
react开发中如何使用require.ensure加载es6风格的组件
本篇文章主要介绍了react开发中如何使用require.ensure加载es6风格的组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
React 中的重新渲染类组件及函数组件
这篇文章主要为大家介绍了React 中的重新渲染类组件及函数组件使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
React使用redux基础操作详解
这篇文章主要介绍了如何在React中直接使用Redux,目前redux在react中使用是最多的，所以我们需要将之前编写的redux代码，融入到react当中去，本文给大家详细讲解，需要的朋友可以参考下
2023-01-01
react项目引入antd框架方式以及遇到的一些坑
这篇文章主要介绍了react项目引入antd框架方式以及遇到的一些坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
React Native 集成jpush-react-native的示例代码
这篇文章主要介绍了React Native 集成jpush-react-native的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08