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 Router冲突。您需要配置.htaccess / web-server以重定向到您的主路径“ /”，然后让反应从那里接管。通常，这就是SPA与服务器一起工作的方式。

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

我在wordpress或php / apache方面经验不足，但是您可以在SPA htaccess config中找到更多信息

Answer 2

我检查了.htaccess文件，但在这里没有发现任何问题，

这是我的文件，（我在localhost上运行）：

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

我在htpd.conf中启用了重写规则 LoadModule rewrite_module libexec/apache2/mod_rewrite.so

我发现了一些关于devServer的信息，然后尝试添加此行：

devServer.historyApiFallback = true;

但这对我的问题没有帮助。

我试图将每个项目移至App.js，并在此处创建了路由（我认为可能是位置错误），但这给出了相同的结果，只是'/'链接正常工作

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

2 个答案: