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

最新推荐文章于 2026-06-16 08:35:49 发布

原创最新推荐文章于 2026-06-16 08:35:49 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react

收录于

框架专栏收录该内容

4 篇文章

订阅专栏

本文介绍了react-router在单页面应用(SPA)中如何通过Route标签的嵌套实现页面间的跳转与组件的动态渲染。点击不同的链接时，仅替换对应的子组件而保持父组件不变，从而高效地实现了SPA中的路由功能。

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