Tips——单页面内的多重跳转路由使用

时间:2023-04-03 08:41:08

一、问题背景

一个路由往往代表一个地址,即一个页面。但同级网页页面的内容有很多是重复的,如果每次加载页面都要加载这些“共有”内容,会导致效率的降低。因此,单页面应用应运而生。它主张在同一页面下将“共同”部分隔离固定下,对需要变换的局部作跳转导航,这样避免了重复渲染,大大提高了效率。此种方法被大量应用在MVVM框架上。

Tips——单页面内的多重跳转路由使用

二、方案

1.react-router

定义路由

<Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="/repos" component={Repos}/>
<Route path="/about" component={About}/>
</Route>
</Router>

使用路由

export default React.createClass({
render() {
return <div>
{this.props.children}
</div>
}
})

2.if..else判断

if( choose == '/' ) {
return <Root />;
} else if( choose == 'repos' ) {
return <Repos />;
} else if( choose == 'about' ) {
return <About />;
}

目前两种方案并没有太大的效果差别。效率差别还需进一步测试。