React嵌套路由

首页home.js

import React from 'react';

class Home extends React.Component {
    render () {
        return (
            <div>
                这是首页
            </div>
        )
    }
}
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 (
            <div>
                <Link to="/news/guoji">国际新闻 </Link>
                <Link to="/news/shehui">社会新闻</Link>

                {/*二级路由,也叫嵌套路由*/}
                <Switch>
                    <Route path="/news/guoji" component={Guoji}/>
                    <Route path="/news/shehui" component={Shehui}/>
                </Switch>
            </div>
        )
    }
}
export default Content;

 

新闻：国际新闻guoji.js

import React from 'react';

class GJ extends React.Component {
    render () {
        return (
            <div>
                这是国际新闻
            </div>
        )
    }
}
export default GJ;

新闻：社会新闻shehui.js

import React from 'react';

class SH extends React.Component {
    render () {
        return (
            <div>
                这是社会新闻
            </div>
        )
    }
}
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 (
            <div>
                <BrowserRouter>
                    <div className="nav">
                        <Link to="/home">首页</Link>
                        <Link to="/news/1/新闻1">新闻</Link>
                    </div>
                    <Switch>
                       {/*一级路由*/}
                        <Route path="/news" component={News}/>
                        <Route path="/" component={Home}/>   {/* 默认显示首页内容：把/home改成/  */}

                    </Switch>
                </BrowserRouter>
            </div>
        )
    }
}
export default Main;