Question

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

 <div class=app></div>

这也引用了JS捆绑和＆amp; React呈现的那就好了。但该网站的一些元素是静态生成的速度和＆amp; 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。

所以我很难找到我想要的文档。我希望能够对某些网址说，需要整页加载（window.location）。同样，当从带有内容的静态页面导航时，需要整页加载，或者内容需要缩短回<div class=app>。

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

Answer 1

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

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

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

然后在我的路线中，我有了堕落，检查路径。

//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”应用程序时，我不认为你必须做任何事情，因为反应路由器会从你移回的网址中获取。

您还可以在位置事件中使用“监听器”。

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

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

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

1 个答案: