React-Router4.X路由的嵌套以及实例

背景

1、小组项目中前端框架使用：Ant Design+Node.js+react（我没写前端。。）
2、发现react单页思想以及部分渲染思想较为新颖，决定去了解一下它（痛苦的开始）
3、首先了解的是node.js的安装，网上教程比较多。然后去看react的API ，开始实际操作时，发现React-Router。 话不多说，上代码以及思路，以及走过的坑。

实例网站：http://47.100.29.150

实例解析

React-Router4.x中 路由配置思想和之前的不太一样，2.x、3.x原路由配置为集中思想，即在一个js中嵌套加嵌套，但是在4.x中采用分散思想，即路由的配置放在每一个组件中，嵌套的子组件配置写在父组件所在的js文件中。
首先在我们安装完react后，使用react脚手架创建一个项目后xx/src路径下存在文件index.js、APP.js，我们首先在这两个文件中入手
index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Link } from "react-router-dom";
import * as serviceWorker from './serviceWorker';
import App from './App.js';

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
serviceWorker.unregister();

App.js
可能看起来比较长，因为在这里添加了导航栏的样式，关键部分为<Link > 、<Router>、<Route>三个标签中的内容。
如下import 部分为App的三个子组件

import Video from './mainpage/video.js';
import Round from './mainpage/about.js';
import Login from './login.js';

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Video from './mainpage/video.js';
import Round from './mainpage/about.js';
import Login from './login.js';
export default class Appextends React.Component {
    render() {
        return (
            <Router>
                <div className="container-fluid" id="container">
                    <div className="row">
                        <div className="col-xs-3 col-sm-2"></div>
                        <div className="col-xs-12 col-sm-8" >
                            <nav className="navbar navbar-inverse" >
                                <div className="container-fluid">
                                    <ul className="nav navbar-nav" >
                                        <li>
                                            <Link to="/">首页</Link>
                                        </li>
                                        <li>
                                            <Link to="/about">战队介绍</Link>
                                        </li>
                                        <li>
                                            <Link to="/video">视频</Link>
                                        </li>
                                        <li>
                                            <Link to="/login">登录</Link>
                                        </li>
                                    </ul>
                                </div>
                            </nav>
                        </div>
                        <div className="col-xs-3 col-sm-2">

                        </div>
                    </div>
                    <hr />

                    <Route exact path="/" component={Home}/>
                    <Route path="/about" component={Round}/>
                    <Route path="/video" component={Video}/>
                    <Route path="/login" component={Login}/>
                </div>
            </Router>
        );
    }
}

function Home() {
    return (
        <div>
            <h2>Home</h2>
        </div>
    );
}

子组件about以及video

about子组件中同时又包含了另一个导航，实现了组件的嵌套，在这里的写法呢需要注意两点：
1、match：match作为react-router中的对象,通过this.propos使用，网上存在const加参数match写法，与这里不同。
2、父子组件：子组件路由路径必须在父组件之下，即父组件为/about，那么子组件需要为/about/xxx
about.js

import React, { Component } from 'react';
import { Switch, Route, Link } from "react-router-dom";
import AboutMember from './aboutMember.js';
import AboutHonor from './aboutHonor.js';

export default class Round extends React.Component {
    render() {
        return (
            <div className="row">
                <div className="col-xs-3 col-sm-2">
                    <ul className="nav nav-pills nav-stacked">
                        <li ><Link to={`${this.props.match.url}/member`}>战队成员</Link></li>
                        <li ><Link to={`${this.props.match.url}/honor`}>获得荣誉</Link></li>
                    </ul>
                </div>
                <Route path={`${this.props.match.path}/member`} component={AboutMember} />
                <Route path={`${this.props.match.path}/honor`} component={AboutHonor} />
            </div>
        );
    }
}

video.js

import React, { Component } from 'react';
import {
    HashRouter,
    Route,
    Link,
    Switch
} from 'react-router-dom';

import VideoHigh from "./videoHigh";
import VideoComplete from "./videoComplete";
export default class Video extends React.Component {
    render() {
        return (
            <div>
                <ul>
                    <li>
                        <Link to={`${this.props.match.url}/highlights`}>精彩集锦</Link>
                    </li>
                    <li>
                        <Link to={`${this.props.match.url}/complete`}>完整录像</Link>
                    </li>
                </ul>
                <Route path={`${this.props.match.path}/highlights`} component={VideoHigh} />
                <Route path={`${this.props.match.path}/complete`} component={VideoComplete} />
            </div>
        )
    }
}

about组件中的子组件aboutMember、aboutHonor

简单写一下
aboutMember.js

import React, { Component } from 'react';
import {
    HashRouter,
    Route,
    Link,
    Switch
} from 'react-router-dom';
export default class AboutMember extends Component {
    render() {
        return (
            <div className="col-xs-5 col-sm-10" >
                等着传头像以及信息。
            </div>
        );
    }
}

aboutHonor.js

import React from 'react';

export default class AboutHonor extends React.Component {

    render() {
        return (
            <div>
                等着传获得的荣誉。
            </div>
        )
    }
}

由app->about->aboutMember、aboutHonor看一下路由的嵌套。

<App>
	<about>
		<aboutMember>
   		</aboutMember>
   		<aboutHonor>
   		</aboutHonor>
   </about>
</App>

实例网站：http://47.100.29.150