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

Question

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

我正在以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]

这导致了"；过多的REDIRECTS"；错误我希望通过一些我不够聪明而不会写的神奇重定向来解决这个问题，但我怀疑它可能比这更复杂。

想法？

Answer 1

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

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

此外，您的应用所在的webroot必须具有AllowOverride All规则或类似规则(视情况而定(。我们将此文件放在react应用程序根目录所在的文件夹中，例如/public_html/myreactapp/.htaccess