javascript - 使用 react-create-wptheme 创建应用程序后路由的 React-router-dom 问题

Question

我的 React 应用程序中的路由问题不大。 我用 npx create-react-wptheme 创建了应用程序. WordPress 是在 mac 上使用 mamp 安装的。

所以，这是我来自 index.js 的代码

import React from 'react'
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Archive from './templates/Archive';
import Single from './templates/Single';
import Notfound from './templates/Notfound';

const routes = (
   <Router>
       <Switch>
            <Route exact path="/" component={Archive} />
            <Route exact path="/page/:slug" component={Archive} />
            <Route path="/post/:slug" component={Single} />
            <Route path="/search/:term" component={Archive} />
            <Route component={Notfound} />
        </Switch>
    </Router>
);

ReactDOM.render(routes, document.getElementById('root'));

当我在这里添加 basename 参数时: <Router basename="/your-site-wp-edition">

终于第一页开始工作，我可以显示我的索引页。但还有其他页面将我重定向到 404 站点。

我找不到任何解决方案，你能帮我解决这个问题吗？

Answer 1

问题是 wordpress 路由与 react 路由冲突。您需要配置 .htaccess/web-server 以重定向到您的主路径“/”，并让 react 从那里接管。 这通常是 SPA 与服务器一起工作的方式。

您告诉 Web 服务器将所有路由重定向到/。

我对 wordpress 或 php/apache 没有太多经验，但您可以在 SPA htaccess config 中找到更多信息。