Javascript 在wordpress后端进行反应SPA路由

我有一个小水疗中心。它托管在WP后端

目前，只有登录页在工作。这个登录页面有两个子页面（一个用于健康，一个用于疾病。通过链接导航，我可以看到URL的外观与我的预期一致，但不符合行为

当我尝试转到MAIN_URL/health或MAIN_URL/disease时，wordpress服务器抛出404个错误。我本以为URL与目的地匹配，但显然需要一些帮助来查看哪些错误

在App.js的

import { BrowserRouter, Switch, Route } from 'react-router-dom';
import './App.css';
import Landing from './pages/Landing';
import HealthyHeartsHome from './pages/HealthyHearts/HealthyHeartsHome.js';
import HeartDiseaseHome from './pages/HeartDisease/HeartDiseaseHome.js';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="AppContent">
          <BrowserRouter basename="/client/boehringer/BI33103/">
            <Switch>
              <Route exact path="/" component={Landing}></Route>
              <Route path="/healthy-hearts" component={HealthyHeartsHome}></Route>
              <Route path="/heart-disease" component={HeartDiseaseHome}></Route>
            </Switch>
        </BrowserRouter>
        </div>
      </div>
    );
  }
}

export default App;

import React from 'react';
import { Link } from 'react-router-dom';
import './LandingNavgrid.css';
import grid1 from '../../assets/landing/grid1.png';
import grid2 from '../../assets/landing/grid2.png';
import grid3 from '../../assets/landing/grid3.png';
import grid4 from '../../assets/landing/grid4.png';

class LandingNavgrid extends React.Component {

    render() {
        return (
            <div className="LandingNavgridShell">
                <div className="LandingNavgridContent">
                    <div className="NavgridElement">
                        <Link to="./healthy-hearts" className="NavgridElementLink NavgridElement1">
                            <p className="NavgridText">Healthy Hearts</p>
                            <img src={grid1} className="NavgridImage" alt="Dog"/>
                        </Link>
                    </div>
                    <div className="NavgridElement">
                        <Link to="./heart-disease" className="NavgridElementLink NavgridElement2">
                            <p className="NavgridText">Heart Disease</p>
                            <img src={grid2} className="NavgridImage" alt="Dog"/>
                        </Link>
                    </div>
                    <div className="NavgridElement">
                        <Link to="./" className="NavgridElementLink NavgridElement3">
                            <p className="NavgridText">Benefits of early diagnosis</p>
                            <img src={grid3} className="NavgridImage" alt="Dog"/>
                        </Link>
                    </div>
                    <div className="NavgridElement">
                        <Link to="./">
                            <p className="NavgridText">Care and treatment</p>
                            <img src={grid4} className="NavgridImage" alt="Dog"/>
                        </Link>
                    </div>
                </div>
            </div>
        )
    }
}

export default LandingNavgrid;

“wordpress后端”是否意味着SPA由Apache上的wordpress在wordpress帖子/页面中提供？还是意味着您运行的SPA由单独的服务器提供（例如使用node/Express或云SPA托管等）

如果您使用的是传统的WordPress/Apache服务器方法，那么问题在于，当您使用React Router设置内存中的javascript路由时，Apache Web服务器对这些路由一无所知

因此，如果您键入url
MAIN\u url/health
，Apache会在磁盘上查找一个名为“health”的文件或目录（Apache也可以配置为使用别名、重写和各种其他重定向等，但我假设您没有配置任何这些）。当它找不到该文件时，返回404。您的实际SPA文件从未由Apache提供过服务，因此React Router无法加载

现在，如果您从登录页开始，我认为单击React Router链接可以在不向Apache发出任何请求的情况下进入正确的内存SPA页。但是如果您刷新浏览器或尝试直接链接到某个路由（登录页除外），则请求确实转到Apache，您将得到404错误

您可以使用重写或别名等配置Apache，以便始终为
main\u url
下的任何url提供SPA主页，这可能是您应该研究的内容

httpd.conf规则可能如下所示：

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>


重新启动发动机
重写基/
重写规则^index\.html$-[L]
重写cond%{REQUEST_FILENAME}！-f
重写cond%{REQUEST_FILENAME}！-d
重写规则。/index.html[L]
您解决了这个问题吗？我的回答有用吗？
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>