直接访问 Wordpress 托管应用程序上的反应路由器路由答案

【问题标题】：Directly access react router route on Wordpress hosted app直接访问 Wordpress 托管应用程序上的反应路由器路由
【发布时间】：2021-03-19 16:06:17
【问题描述】：

我知道这是一个常见问题部分，但我认为这种情况有些独特。

我正在以 WP 插件的形式运行 React 应用程序。以下是它的工作原理：

插件设置为在特定页面模板 (events.php) 上工作。 React 应用程序也配置为在此模板上工作。因此，/events/（设置为使用该模板的页面）实际上是应用程序的主页。这一点很重要，因为简单的“包罗万象”重定向解决方案并不能解决我的问题，因为用户需要可以访问网站的其余部分。

事件是通过 Salesforce SOQL 查询引入的。该应用程序显示事件源，并且由于日历事件的性质，路线显然是动态的并且不断变化。这是我生成路线的代码：

const generateEventRoute = route => {
  return (
    <Route key={route.Id} exact path={`/event/${route.Id}`}>
      <SingleEvent {...route} />
    </Route>
  )
}

这是路由器系统的其余部分：

<Router basename="/events">
  <ScrollToTop />
  <Switch>
    <Route exact path="/">
      <EventFeed />
    </Route>
    {eventList.map(event => generateEventRoute(event))}
  </Switch>
</Router>

问题和其他人一样，如果从主页开始，我可以访问路由，但直接导航到它们时无法访问它们（在 URL 栏中输入地址）。

到目前为止，我尝试了一种重定向规则，但无济于事（我根本不精通 Apache 配置或重定向）：

RewriteRule ^events/(.*)$ /events [R=301,NC,L]

这导致了“重定向过多”错误。我希望这可以通过一些我不够聪明的魔法重定向来解决，但我怀疑它可能比这更复杂。

想法？

【问题讨论】：

标签： reactjs wordpress react-router

【解决方案1】：

通常使用 react，您不想重写特定的 url 并允许 apache 进行处理，您希望重定向到主要的 react 应用程序并允许它进行重定向。例如，对于我们的其中一个应用程序，其中 index.html 包含我们的 react 应用程序（请注意，如果您使用的是 create-react-app，则可能需要将 package.json 更改为您的 react 应用程序根目录）：

RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]
    RewriteRule ^ index.html [L]

此外，托管您的应用程序的 webroot 必须具有规则 AllowOverride All 或类似的规则（视情况而定）。我们把这个文件放在react app root所在的文件夹中，例如/public_html/myreactapp/.htaccess

【讨论】：