React最简单的一层路由，不含动态路由

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
  HashRouter,
  Route,
  Link,
  Switch
} from 'react-router-dom';
 
 class Bpp extends Component {
  render() {
    return (
      <div>
        <h1>Bpp</h1>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>
        {this.props.children}
      </div>
    );
  }
}
 
const About = () => (
  <div>
    <h3>About</h3>
  </div>
)
 
const Home = () => (
  <div>
    <h3>Home</h3>
  </div>
)
 
const Message = ({ match }) => (
  <div>
    <h3>new messages</h3>
    <h3>{match.params.id}</h3>
  </div>
)
 
const Inbox = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <Route path={`${match.url}/messages/:id`} component={Message}/>
 
  </div>
) 
 

export const Show = () =>(
<HashRouter>
    <Bpp>
        {/* 这三个就是插槽分发的路由   插槽路由分发 */}
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/inbox" component={Inbox} />
    </Bpp>
  </HashRouter>
)

被导出的路由是 Bpp，那么这个Bpp的结构是什么样的呢

BPP

   <Bpp>
        {/* 这三个就是插槽分发的路由   插槽路由分发 */}
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/inbox" component={Inbox} />
    </Bpp>

这才是Bpp的结构，Show组件引入了Bpp组件，Bpp组件里面有个插槽分发

分发到了Bpp组件作为Bpp的children

这个Children可以包含任何类型，包括节点类型，也就是说把这三个Route组件分发给了Bpp,Bpp使用 {this.props.children}，来渲染

  <div>
        <h1>Bpp</h1>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>
        {this.props.children}
      </div>