阵营

Question

静态和动态页面之间的路由，以便通常我们的S3托管的Web应用程序的index.html的样子：

<div class=app></div> 

这还引用了JS束&起反应呈现到这很好。但是，该网站的一些元素都是静态的速度& SEO产生的，看起来像：

<!-- dynamically generated content --> 
<div class=app></div> 
<!-- statically generated content --> 
<h1>Title</h1> 
<p>Information, blah blah blah</p> 
<p>Lots of content</p> 

传统智慧可能暗示具有在ReactJS组件，然后reactDOM.renderToString()静态的东西，但我并不想这样做是因为这样做很复杂，因为静态组件从许多API中抽取。

所以我很努力地找到我想要的文档。我希望能够对某些URL说，一个完整的页面加载是必要的（window.location）。同样，当从具有内容的静态页面导航时，需要整页加载或内容需要跳回到<div class=app>。

如何通过反应路由器实现此目的？

Answer 1

这是我会与我的头顶。如果不符合您的需要/目的，我表示歉意。我认为我明白你要去。我可能有这个错误，但我认为你的静态页面没有反应路线。在反应环境之外的文字静态页面。

1. 我会为这些静态页面创建一个白名单。

   常量白名单= [“关于我们”，“帮助”在我的路线

2. 然后，我有fallthru，检查路径。

   //psuedo code 
   { 
       path: '*', 
       onEnter:() => { 
        if(whitelist.includes(path)) { 
         window.location = /path 
        } 
       }, 
       component: Four0Four, 
   }, 
   

，或者你可能只是在前面加上静态页面，如下所示：

也许像 “/static?aboutus.html”

一个网址

//psuedo code 
{ 
    path: 'static', 
    onEnter:() => { 
     if(whitelist.includes(path)) { 
      window.location = `/static/${param}` 
     } 
    }, 
    component: Four0Four, 
}, 

当你回到“react-route react”应用程序时，我不认为你必须做任何事情，因为反应路由器将会我从你回到的网址中选择。

1. 您也可以在位置事件中使用“侦听器”。

   browserHistory.listen(location => { 
       // do your checking for the static pages here 
   }); 
   

我希望我不是太离谱的基础上我的理解，如果我。让我知道，我会删除我的回应。