在静态和动态页面之间进行路由

Question

通常我们的S3托管Web应用程序index.html如下所示:

 <div class=app></div>

这也引用了JS捆绑和React呈现的,这很好.但该网站的一些元素是静态生成的速度和搜索引擎优化,看起来像:

 <!-- 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>.

如何使用react路由器实现这一目标？

Answer 1

这是我最喜欢的事情.如果不符合您的需求/目的,我道歉.我想我明白你的意思.我可能有这个错误,但我认为你的静态页面没有反应路由.反应环境之外的文字静态页面.

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

   const whitelist = ['aboutus','help']

2. 然后在我的路线中,我有了堕落,检查路径.

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

或者您可以像这样预先添加静态页面:

3. 也许像"/static?aboutus.html"这样的网址

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

当你回到"react-route react"应用程序时,我不认为你必须做任何事情,因为react-router会从你移回的url中获取.

4. 您还可以在位置事件中使用"监听器".

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

如果我是的话,我希望我的解释不会太远.让我知道,我会删除我的回复.