历史记录 JS/.htaccess - 重写所有索引，但保留路径

Question

我正在 React 中构建一个应用程序，由于应用程序的布局/状态，我无法使用 React Router，因此使用历史记录 JS 来管理站点导航。在我的最外层容器中，我设置了以下代码来管理导航：

handlePageChange = (event) => {
//stop default page change
event.preventDefault();
const history = createHistory()
if(typeof(event.target.tagName) === "undefined") {
var newURL = window.location.pathname;
} else {
var newURL = event.target.getAttribute('href');
history.push(newURL)
}
this.setState({
activePage:newURL.replace('/','')
})
setTimeout(function(){
this.setState({
sideNavState:""
})            
}.bind(this),300)
}

上面的代码适用于导航页面，但是在直接访问链接时遇到了问题。例如，如果我尝试访问 mysite.com/page1 则在此服务器上找不到请求的URL，因为我尚未设置任何页面，因为它们由应用程序状态控制。

我希望所有页面(mysite.com/page1、mysite.com/page2 等)都指向位于根目录中的同一索引.html文件，那么正确的方法是什么？我使用了下面的.htaccess重写条件，但对所涉及的语法有点迷茫，因此无法使其工作：

RewriteEngine On
RewriteRule ^(.+).php$ index.html?page=$1 [L,QSA,NC]

另外，我是否在这里为我试图实现的页面导航使用了正确的方法？值得注意的是，我只有在托管我的应用程序并且在本地主机上它的行为方式达到我想要的方式时才会遇到此问题。

谢谢！

Answer 1

我找到了我想要的东西：

RewriteEngine On
RewriteRule ^([^/d]+)/?$ index.html?id=$1 [QSA]

这要归功于这里的这个链接

现在，文档停止页面查找子目录根目录，使用附加的路径重写回站点根目录