React学习19----react-router4.x路由的嵌套

最新推荐文章于 2024-07-30 10:55:19 发布

zhaihaohao1

最新推荐文章于 2024-07-30 10:55:19 发布

阅读量484

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/87966970

版权

本文介绍了在React中使用react-router4.x进行路由嵌套的方法，通过App.js配置Home和User路由，以及在User内部进一步配置Main和Info组件的路由。示例项目结构和关键代码展示，提供了源码下载链接。

摘要由CSDN通过智能技术生成

路由的嵌套：
举例说明：（下面例子）
在 App.js 中配置路由 User ,
在User 里面在配置Info组件的路由

具体例子如下：
效果图：
在这里插入图片描述

项目结构：
在这里插入图片描述

最核心的两个类：
App.js 中配置 Home.js 和 User.js 的路由：

import React, {Component} from 'react';
import logo from './asset/images/logo.svg';
import './asset/css/App.css';
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
import Home from "./components/Home";
import User from "./components/User";

import './asset/css/index.css'

/**
 * 配置嵌套路由
 */
class App extends Component {
    render() {
        return (
            <Router>
                <div>
                    {/*上面显示两个标