Реагировать SPA маршрутизации на WordPress Back-end

Question

У меня есть маленькая реакция SPA.Он размещен на WP-сервере.

На данный момент работает только целевая страница.Эта целевая страница имела 2 подстраницы (одну для здоровья и одну для болезни. Перемещаясь по ссылкам, я вижу, что URL выглядят так, как я намереваюсь, но не в поведении.

Сервер WordPress выбрасывает 404ошибки, когда я пытаюсь перейти в MAIN_URL / здоровье или MAIN_URL / болезнь. Я бы подумал, что 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 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;