React嵌套路由

首页home.js

import React from 'react';

class Home extends React.Component {
    render () {
        return (
            

                这是首页
            
        )
    }
}
export default Home;

新闻news.js

import React from 'react';
import {Link,Route,Switch} from 'react-router-dom';
import Guoji from './guoji.js';
import Shehui from './shehui.js';

class Content extends React.Component {
    render () {

        return (
            

                国际新闻 
                社会新闻

                {/*二级路由,也叫嵌套路由*/}
                
                    
                    
                
            
        )
    }
}
export default Content;

 

新闻：国际新闻guoji.js

import React from 'react';

class GJ extends React.Component {
    render () {
        return (
            

                这是国际新闻
            
        )
    }
}
export default GJ;

新闻：社会新闻shehui.js

import React from 'react';

class SH extends React.Component {
    render () {
        return (
            

                这是社会新闻
            
        )
    }
}
export default SH;

主页index.js（嵌入首页和新闻）

import React from 'react';
import {BrowserRouter,Route,Switch,Link} from 'react-router-dom'; //BrowserRouter; Route路由; Switch路由匹配
import News from './news.js';
import Home from './home.js';
import './index.scss';

//把类当成函数的集合
class Main extends React.Component {

    render () {
        return (
            

                
                    

                        首页
                        新闻
                    
                    
                       {/*一级路由*/}
                        
                           {/* 默认显示首页内容：把/home改成/  */}

                    
                
            
        )
    }
}
export default Main;