React多级路由 React子路由

最新推荐文章于 2024-08-13 22:27:09 发布

置顶

yj6232779

最新推荐文章于 2024-08-13 22:27:09 发布

阅读量3.1k

点赞数

文章标签： react

本文链接：https://blog.csdn.net/yj6232779/article/details/104775219

版权

本文介绍了如何在React中设置多级路由和子路由。通过创建Home组件、子路由页面Child1和Child2，以及在router文件夹中的index.js配置路由，最后在项目入口文件index.js引入子路由配置，实现了React路由的动态变化。关键在于为防止子路由页面不更新，需在窗口中添加key属性。

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

React多级路由 React子路由设置

新建一个Home.jsx文件和Home.css文件 css文件内容就不写了 Home 文件内容如下
为了解决点击Link时，路由变化而子路由页面未变化，所以需要在窗口中加入key属性。

import "./Home.css"
import React,{
    Component } from "react";
import {
    BrowserRouter as Router, Route, Link } from "react-router-dom";


import Child1 from '../../components/child1/Child1';
import Child2 from '../../components/child2/Child2';


class Home extends Component{
   
    render (){
   
        return (
            <div className="home">
                <aside className="home_menu">
                    <button><Link to={
   `${
     this.props.match.path}/child1`}>子路由1</Link><