Question

如果没有登录，是否可以呈现静态网页，但如果之前已登录，则以某种方式加载SPA（ReactJS）？或者那些是静态的＆＃39;网页只是应用程序的一部分？

我的意思是像Twitter.com或Facebook.com，以及他们如何在您之前登录时立即加载应用程序，或者是可抓取的默认页面。

服务器端渲染是唯一的答案吗？或者是否有更简单的解决方案，因为大多数搜索引擎都可以抓取JavaScript网站？如果可能的话，我不想使用像app.domain.com这样的子域名。

想法：大多数ReactJS教程都以一个相当空的index.html开头，其中包含React应该呈现的div。具有实际内容的bootstrap html怎么样，如果React检测到用户已经登录，那么动态删除那些静态内容？这常见吗？什么是缺点？

Answer 1

这可以通过在react js中使用if else条件来解决。

希望您从api获得用户信息。

如果api为您提供了一些用户信息，那么您可以将该信息存储在状态中并显示它们。

如果该状态为null，则可以显示静态页面。

通过这个，你可以渲染静态页面并在同一页面上反应js。

希望这个ans能解决你的问题

Answer 2

我从你的问题中理解的是： - 我们可以在用户未登录时显示静态html内容，并在用户登录或登录用户再次访问同一网站时替换该内容。

我以更简单的方式基于我的上述假设回答了这个问题。

在ReactJS中，一切都从真实DOM的根元素开始，<div id="root"></div>您可以在公共文件夹的index.html中找到它。

从ReactDOM.render()方法将其JSX对象渲染到真实DOM的根元素中。

JSX对象是html＆amp;组合java脚本如下

<div> Hi, {"shreyans".toUpperCase()} </div>

您可以将引导HTML或任何静态html内容写入JSX对象并在真实DOM上呈现。

由于JSX是html和java脚本的组合，因此您可以根据不同的场景编写登录以呈现不同的内容，如下所示： -

<div> { userIsLoggedIn ? "Welcome," + {userName} : "Please Login"} </div>

基于不同场景在大型JSX对象或html内容之间切换的更大层次如下： -

＆＃13;

render()
{
  
    let signUp =
    <div>
      Please signup !!
      You extra content or a login form
    <div>
    
    let loggedIn =
    <div>
      Welcome User,
      You extra content or a list of menu
    </div>
    
    return(
      <React.Fragment>
       {
          this.state.isUserLoggedIn ?
          {signUp}:
          {loggedIn}
       }
       </React.Fragment>
      )
 }

＆＃13;

只需仔细阅读以下链接，即可获得反应React JS Official

的乐趣

如何在Twitter或FB等相同的URL上提供静态页面+反应应用程序？

2 个答案: