react-router 路由嵌套以及路由无限循环

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

guoxiaxing

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

阅读量3.3k

点赞数 1

分类专栏：前端框架

本文链接：https://blog.csdn.net/hahahahahahahaha__1/article/details/80797073

版权

本文详细探讨了React-Router在路由嵌套中的使用技巧，包括如何正确设置嵌套路径，以及如何防止由于配置错误导致的路由无限循环问题。通过对具体代码实例的分析，读者将能够掌握React-Router高级用法，提升前端应用的路由管理能力。

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

App.js:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import './App.css';
//定义组件的三种方式
// 1
class Home extends Component{
  render(){
    return (
        <div>这里是主页</div>
      );
  }
}
// 路由嵌套(和路由变量)可以让多个路由对应一个组件
class News2 extends Component{
  
  render(){
    console.log(this.props.match.params.gxx)
    return (
      <Router>
        <div>
          <Link to={this.props.match.url+'/run'}>跑步</Link>
          <Link to={this.props.match.url+'/swim'}>游泳</Link>
          <Link to={this.props.match.url+'/photo'}>照相</Link>
          <Route path={this.props.match.url+'/:name'} component={News2} />
        </div>
      </Router>
    )
  }
}
class News extends Component{
  render(){
    /*可通过this.props.match.url获取父级