欢迎使用CSDN-markdown编辑器

来源：互联网发布：莫知我哀莫的意思编辑：程序博客网时间：2024/06/05 05:19

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>        )    }}

0 0