react-router-dom v5.1.2 版本 實現嵌套路由

找了好久都沒有找到最新版的中文文檔 v5.1.2。。。

入口文件 src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import AppRoute from './AppRoute';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<AppRoute />, document.getElementById('root'));

serviceWorker.unregister();

路由表 src/AppRoute.js

import React,{Component} from 'react';
import {
    HashRouter,
    BrowserRouter as Router,
    Switch,
    Route,
    Link
  } from "react-router-dom";
import App from './page/App';
import Test from './page/Test';
import NotFound from './page/NotFound';

class AppRoute extends Component{
    constructor(props){
        super(props);
        this.state = {};
    }
    render() {
        return <HashRouter>
        <Switch>
            {/* 首頁 */}
            <Route path="/" component={()=>(
                <App>
                    {/* 測試 */}
                    <Route exact path="/test" component={Test}/>
                    {/* 404頁面 */}
                    <Route path="*" component={NotFound}/>
                </App>
            )}>
            </Route>
        </Switch>
    </HashRouter>
    }
}
export default AppRoute;

首頁 src/page/App/index.js

import React,{Component} from 'react';
import LeftMenu from './components/LeftMenu';

import './index.scss';

class App extends Component{
    constructor(props){
        super(props);
        this.state = {};
    }
    render() {
        return <div className="body">
            <div className="children-container">
                {this.props.children}
            </div>
        </div>
    }
}

export default App;

子頁面 Test（名字隨意）src/page/Test/index.js

import React,{Component} from 'react';

import './index.scss';

class Test extends Component{
    constructor(props){
        super(props);
        this.state = {};
    }
    render() {
        return <div className="container">
        測試
        </div>
    }
}

export default Test;

使用參考鏈接的代碼，出現了錯誤，提示router需要傳入字符串或函數，修改為本文中的代碼即可實現嵌套路由

參考：在React中使用react-router-dom路由 https://www.jianshu.com/p/8954e9fb0c7e