reactSSR为什么只在第一次渲染的时候走路由?

发布于 2022-09-11 23:17:14 字数 890 浏览 26 评论 0

<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技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

ゝ杯具 2022-09-18 23:17:14

服务端渲染的基本套路就是用户请求过来的时候,在服务端生成一个我们希望看到的网页内容的HTML字符串,返回给浏览器去展示。浏览器拿到了这个HTML之后,渲染出页面,但是并没有事件交互,这时候浏览器发现HTML中加载了一些js文件(也就是浏览器端渲染的js),就直接去加载。加载好并执行完以后,事件就会被绑定上了。这时候页面被加载的js接管了,也就是到了我们熟悉的js渲染页面的过程。所以之后的路由跳转都是前端实现的

南…巷孤猫 2022-09-18 23:17:14

vue 和 React 的服务端渲染的原理是一样的,只有在首屏的时候才会有服务端渲染,意思就是这个页面里所有的资源数据都是服务端渲染出来,再换句话说,就是页面的 DOM 结构是服务端帮你生成的。
当你在页面(单页面)进行路由跳转的时候,这个时候的路由是前端控制的,也就是说,此时的页面的 DOM 结构是由 script 脚本帮你生成的,所以这个时候的页面渲染跟服务端就没关系了。

我之前写了一个非常详细的 React SSR 的教程,感兴趣可以看一下 React 服务端渲染

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文