使用wordpress响应路由器v4和htaccess

我制作了一个简单的React应用程序，它有两个组件，可以通过链接从一个组件路由到另一个组件。如果页面是独立的，那么它工作得很好。通过应用程序内部的链接，组件可以切换，更改url也可以很好地更改组件。URL中的参数也在工作。 但现在我想把它作为插件集成到Wordpress中。该插件工作正常，react应用程序在wordpress页面上显示。路由器在应用程序内部工作。但是如果我更改url，就不可能在组件之间切换。
我知道这是.htaccess文件正确配置的问题。 wordpress的原始.htacces如下所示：

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

# END WordPress

package.json

"homepage": "http://wp_react_router.local/wp-content/plugins/shortcode-test/js/build",

有人知道我在htaccess或其他htaccess中必须做什么吗

---

谢谢你的帮助。

我真的不会愚弄Wordpress.htaccess文件。相反，我会将路由存储在React组件中，而不使用URL

对于如何做到这一点，这里有一个很好的答案：

想想如果在同一页上有两个React组件，你会怎么做？您也不想使用URL路由

---

另一种选择是使用Redux之类的工具，如果只有两个组件，则自己处理路由。

以下是角度路由器的解决方案：

在wordpress主题或插件中，您需要在functions.php（您在其中添加样式和js。它有插件的名称）中添加一个函数，该函数覆盖htaccess。因此，您不需要对htaccess文件本身进行任何更改

例如：

add_action('init', 'custom_rewrite_basic_angularApp');

function custom_rewrite_basic_angularApp() {
    require 'config.php';
    add_rewrite_rule(
        '^'. $wordpressShortcodePageName. '\/(.*)\/?',
        'index.php?pagename='. $wordpressShortcodePageName,
        'top'
    );
}

$wordpressShortcodePageName必须是页面的名称。 现在，角形路由器工作正常。这是没有测试反应路由器，但我认为这是相同的问题，所以它应该工作

---

请让我们知道它是否有效。H

我正在处理Vue.js，遇到同样的问题

我现在找到了一个解决方案：您可以转储

（new\WP_Rewrite（））->Rewrite_rules（）

来获取所有的WP路由规则（使用Regex），对于vue路由器，Regex可以直接用于设置动态路由

目前我正在进行这项工作，工作完成后，我将在这里分享我的代码

---

重写规则转储就像这样可以，但这意味着没有机会在应用程序的特定组件上显示url或在wordpress的react应用程序中使用浏览器导航？如果是这样的话，我会很难过。嘿@fricko，你找到解决办法了吗？我发现WP-htaccess与我试图在子目录中使用的react-router-url链接相混淆。请参阅我在上面描述的解决方案。它也应该适用于react。

import React, { Component } from 'react';
import './Green.css';
import { withRouter, Link } from 'react-router-dom';


const GreenComponent = withRouter(props => <Green {...props} />);
class Green extends Component {
    render() {
        return (
            <div className="Green">
                <header className="Green__header">
                    <nav className="GreenlicationHeader__nav">
                        <ul className="GreenlicationHeader__ul">
                            <li className="GreenlicationHeader__li">
                                <Link className="Green__a" to='/'>Blue</Link>
                            </li>
                        </ul>
                    </nav>
                </header>
                <p className="Green-intro">
                    To get started, edit <code>src/App.js</code> and save to reload.
                </p>
            </div>
        );
    }
}

export default GreenComponent;

"homepage": "http://wp_react_router.local/wp-content/plugins/shortcode-test/js/build",

add_action('init', 'custom_rewrite_basic_angularApp');

function custom_rewrite_basic_angularApp() {
    require 'config.php';
    add_rewrite_rule(
        '^'. $wordpressShortcodePageName. '\/(.*)\/?',
        'index.php?pagename='. $wordpressShortcodePageName,
        'top'
    );
}