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>