reactSSR为什么只在第一次渲染的时候走路由?
<StaticRouter location={url}>
<Component initialData={data}/>
</StaticRouter>
这是renderToString的组件,为什么只在第一次进入的时候才走这个路由,其他貌似走的是前端路由
function AppRoute(props){
return (
<>
<Switch>
<Route path={'/baidu'} component={Baidu}></Route>
<Route path={'/google'} component={Google}></Route>
<Route path='/' component={Default} exact></Route>
</Switch>
</>
)
}
function Default(){
console.log('i am app route')
return (
<div>
<Link to="/baidu">百度</Link>
<Link to="/google">谷歌</Link>
</div>
)
}
所有的路由都只在浏览器刷新后打印消息(在服务端的控制台),而通过Link跳转的则全部没有在服务端console,却都在浏览器里console了,求解
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
服务端渲染的基本套路就是用户请求过来的时候,在服务端生成一个我们希望看到的网页内容的HTML字符串,返回给浏览器去展示。浏览器拿到了这个HTML之后,渲染出页面,但是并没有事件交互,这时候浏览器发现HTML中加载了一些js文件(也就是浏览器端渲染的js),就直接去加载。加载好并执行完以后,事件就会被绑定上了。这时候页面被加载的js接管了,也就是到了我们熟悉的js渲染页面的过程。所以之后的路由跳转都是前端实现的
vue 和 React 的服务端渲染的原理是一样的,只有在首屏的时候才会有服务端渲染,意思就是这个页面里所有的资源数据都是服务端渲染出来,再换句话说,就是页面的 DOM 结构是服务端帮你生成的。
当你在页面(单页面)进行路由跳转的时候,这个时候的路由是前端控制的,也就是说,此时的页面的 DOM 结构是由 script 脚本帮你生成的,所以这个时候的页面渲染跟服务端就没关系了。
我之前写了一个非常详细的 React SSR 的教程,感兴趣可以看一下 React 服务端渲染