React嵌套路由

当我们打开大部分网站的首页时，页面上会展示一个顶栏、一个侧边栏和一个list，当选中某条数据点击，就会跳转到详细画面。
一般采用如下格式的嵌套路由：

<Router history={hashHistory}>
  <Route path="/" component={App}>
    <Route path="/repos" component={Repos}/>
    <Route path="/about" component={About}/>
  </Route>
</Router>

但是，报warning：
React Router v4: Component and Children in the same route

查看本地安装react和react路由的版本：
npm info react(我的是@16.7.0)
npm info react-router(我的是@4.3.1)

https://stackoverflow.com/questions/46025494/react-router-v4-component-and-children-in-the-same-route
介绍的修正方法：
或

对于开头说及的功能的实现：
src\routes\App.js

import React, {Component} from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import List from './routes/List';

class App extends Component {
    render() {
        return (
            <Router>
                <Route path="/list" component={List}/>
            </Router>
        );
    }
}

export default App;

src\routes\List.js

import React,{Component} from 'react';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
import Documentation from "./Documentation";

const showDocumentationDetail = (props) =>{
    return (<Documentation id={props.match.params.id}></Documentation>)
};
class List extends Component {
    render(){
        return(
            <Router>
                <Switch>
                    <Route path="/list/:id" render={(props)=>showDocumentationDetail(props)}></Route>
                    <div>
                        <ul>
                            <li><Link to='/list/1'>list detail1</Link></li>
                            <li><Link to='/list/2'>list detail2</Link></li>
                            <li><Link to='/list/3'>list detail3</Link></li>
                        </ul>
                    </div>
                </Switch>
            </Router>
        )
    }
}


export default List;

src\routes\Documentation.js

import React, { Component } from 'react';

class Documentation extends Component {
    constructor(props){
        super(props);
    }
    render() {
        return(
            <h1>Documentation{this.props.id}</h1>
        )
    }
}

export default Documentation;