前言:
这个例子主要用到Route组件的三大render methods(render、component、children)之一children;有小编说children不同于component的作用是:有时候你可能只想知道访问地址是否被匹配,然后改变下别的东西,而不仅仅是对应的页面。我还不是很能体会到这句话的意思,不过这些不重要,你把它当成component或render完全可以理解。
效果如下:
代码如下:
class OldSchoolMenuLink extends Component{
render() {
return (
<Route children={(props) => {
return (
<li>
<Link to={this.props.path}>{this.props.label}</Link>
</li>
)
}} />
)
}
}
class App extends Component{
render() {
return(
<Router>
<div>
<ul>
<OldSchoolMenuLink path="home" label="/Home"/>
<OldSchoolMenuLink path="about" label="/About"/>
</ul>
<hr />
<Route path="home" component={Home}/>
<Route path="about" component={About}/>
</div>
</Router>
)
}
}
class Home extends Component{
render() {
return(
<div>
Home
</div>
)
}
}
class About extends Component{
render() {
return(
<div>
About
</div>
)
}
}
倘若你还不理解请参考我的github上的这个示例:https://github.com/guoqin721/react-router-dom4