在 wordpress 后端反应 SPA 路由

Question

我有一个小的反应 SPA。它托管在 WP 后端。

目前，只有着陆页有效。此登录页面有 2 个子页面（一个用于健康，一个用于疾病。通过链接导航，我可以看到 url 看起来像我想要的那样，但不是行为。

当我尝试转到 MAIN_URL/health 或 MAIN_URL/disease 时，wordpress 服务器抛出 404 错误。我原以为网址与目的地相匹配，但显然需要一些帮助才能看到不正确的地方。

在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 Header from '../components/common/Header.js';
import LandingBanner from '../components/landing/LandingBanner.js';
import LandingNavgrid from '../components/landing/LandingNavgrid.js';
import LandingAd from '../components/landing/LandingAd';
import Footer from '../components/common/Footer.js';

class Landing extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    componentDidMount(){
        document.title = "Heart Health";
    }

    render() {
        return (
            <div className="Landing">
                <Header/>
                <LandingBanner/>
                <LandingNavgrid/>
                <LandingAd/>
                <Footer/>
            </div>
        )
    }
}

export default Landing;

在LandingNavgrid.js

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;

Answer 1

“wordpress 后端”是否意味着 SPA 是由 WordPress-on-Apache 从 WordPress 帖子/页面中提供的？或者这是否意味着您正在运行一个 "headless" CMS，而 SPA 由单独的服务器提供服务（使用例如节点/Express 或云 SPA 托管等）。

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

因此，如果您输入 url MAIN_URL/health，Apache 会在磁盘上查找名为“health”的文件或目录。 （Apache 也可以配置为使用别名、重写和各种其他重定向等，但我假设您没有配置任何这些）。当它没有找到那个文件时，它返回 404。你的实际 SPA 文件从来没有被 Apache 提供过，所以 React-Router 没有机会加载。

现在，如果您从登录页面开始，我认为单击 React-Router 链接应该将您带到正确的内存中 SPA 页面，而无需向 Apache 发出任何请求。但是，如果您刷新浏览器或尝试直接链接到您的某个路由（着陆页除外），那么请求确实会转到 Apache，您将收到 404 错误。

您可以配置 Apache，使用重写或别名等始终为您的主 SPA 页面提供MAIN_URL 下的任何 url，这可能是您应该研究的。

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>