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

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 (
        
这里是主页
      );
  }
}
// 路由嵌套(和路由变量)可以让多个路由对应一个组件
class News2 extends Component{
  
  render(){
    console.log(this.props.match.params.gxx)
    return (
      
        

          跑步
          游泳
          照相
          
        
      
    )
  }
}
class News extends Component{
  render(){
    /*可通过this.props.match.url获取父级的路由地址*/
    console.log(this.props.match.url); /*/News*/
    return (
      
          

           { /*跑步
            游泳
            照相*/
            /*可改写为*/}
            {/*跑步
            游泳
            照相
            */}
          {/*路由循环嵌套*/}
            跑步
            游泳
            照相
            
          
      
    )
  }
}
class Sport extends Component{
/*path='/News/:gxx' 这里的参数可以在后面的Sport组件中通过this.props.match.params.gxx获取*/
 /*点击对应子路由获得参数run,swim,photo*/ 
  render(){
    return (
      
这是一项运动
    )
  }
}
//3 普通函数(中获取路由相关信息)
const About = function(data){
  console.log(data.match.url)/*/About*/
  return (
      
这里是关于信息
    )
}
class App extends Component {
  render() {
    return (
      /*路由要用Router标签包起来*/
      
        {/*要有一个根元素*/}
        

          {/*to后为地址相对于当前地址而言*/}
          首页
          新闻
          关于
          {/*对应内容放在Route中 path为对应路径  component为对应组件 exact为严格匹配，只匹配路径为'/'的元素*/}
          
          
          
        
      
    );
  }
}

export default App;