react-router实现单页面应用简析

react-router实现单页面应用简析

react-router通过Route标签的嵌套，实现点击切换为不同的路由。每个路由都有自己对应的component组件。那么点击切换路由，只是渲染不同的子组件，实质是利用了{this.props.children}。

export default class Index extends Component {
    render() {
        return (
            <div className="header">
                <div>
                    <span><IndexLink to="/">Home</IndexLink></span>
                    <span><Link to="/add" className='link'>新增页</Link></span>
                    <span><Link to="/list" className='link'>列表页</Link></span>
                    <span><Link to="/detail" className='link'>详情页</Link></span>
                </div>
                {this.props.children}//这里决定了每次切换，渲染不同的子组件，而父组件不变
            </div>
        )
    }
}