Question

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

目前，只有目标网页正在运行。该着陆页有2个子页面（一个用于健康，一个用于疾病。浏览链接，我可以看到这些URL看起来像我想要的一样，但行为不正常。

当我尝试转到MAIN_URL /运行状况或MAIN_URL /疾病时，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帖子/页面中的Apache-WordPress上提供的？还是这意味着您正在运行"headless" CMS，并且SPA是通过单独的服务器提供服务（例如，使用node / Express或cloud-SPA托管等）。

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

因此，如果您输入URL MAIN_URL/health，Apache将在磁盘上寻找一个名为“运行状况”的文件或目录。（还可以将Apache配置为使用别名，重写以及所有其他重定向类型，但是我假设您没有配置任何东西）。当找不到该文件时，它将返回404。Apache从未提供过您的实际SPA文件，因此React-Router没有加载的机会。

现在，如果您从登录页面开始，我认为单击React-Router链接应该，您可以直接进入正确的内存SPA页面，而无需向Apache发出任何请求。但是，如果您刷新浏览器或尝试直接链接到其中一条路线（而不是着陆页），则请求确实到达了Apache，您将收到404错误。

您可以使用重写或别名等配置Apache，以便始终在MAIN_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>

在WordPress后端上反应SPA路由

1 个答案: