react-router-dom怎样写子路由页面,嵌套路由，类似 router-view+name,渲染指定内容。

一、场景需求

如图，需要在一个路由中加入三个子路由，需要类似 vue的 【router-view+name】。

二、实现

./pages
├── App.js
├── threeChildren.js
└── aaa.jsx
└── bbb.jsx
└── ccc.jsx

App.js

import React, { Component } from "react";
import { HashRouter, Switch, Route, Redirect } from "react-router-dom";
import ThreeChildren from "../threeChildren"

class App extends Component {
  render() {
    return (
      <HashRouter>
        <Switch>
          ...
          {/* <Route path="/ThreeChildren" component={ThreeChildren} exact /> */}
          {/* 注意这里，如果嵌套路由的话，一定不能加 exact */}
          <Route path="/ThreeChildren" component={ThreeChildren} />
          ...
        </Switch>
      </HashRouter>
    );
  }
}

export default App;

ThreeChildren.js

import React, { PureComponent } from 'react'
import { Route, Switch } from 'react-router-dom'
import aaa from "./aaa"
import bbb from "./bbb"
import ccc from "./ccc"

const list = [
	{ path:"/threeChildren/aaa", component:aaa, },
	{ path:"/threeChildren/bbb", component:bbb, },
	{ path:"/threeChildren/ccc", component:ccc, }
]

class Index extends PureComponent {
  routergo = (path) =>{
    this.props.history.push(path)
  }

  render() {
    return (
      <div>
      	// 左侧的按钮列表
        <div className="list-menu">
          {list.map(item=> 
          	<div key={item.path} onClick={()=>this.routergo(item.path)}>
           		{item.path}
           	</div>
          )}
        </div>
		// 右侧的嵌套路由视图
        <div>
          <Switch>
            {list.map(item=>{
            	const { path, component, } = item;
                return <Route key={path} path={path} component={component}/>
            })}
          </Switch>
        </div>
      </div>
    )
  }
}

export default Index

aaa/bbb/ccc .jsx 这里是内嵌组件

	export default aaa/bbb/ccc = () =>{
		return	<div>aaaaaaaaaa</div>
		// return	<div>bbbbbbbbbbbb</div>
		// return	<div>cccccccccccc</div>
	}

参考链接：vue-router 命名视图：https://router.vuejs.org/zh/guide/essentials/named-views.html