使用 wordpress 反应路由器 v4 和 htaccess

Question

我用两个组件制作了一个简单的 React 应用程序，可以通过链接从一个组件到另一个组件。如果页面是独立的，它工作得很好。使用应用程序内的链接可以切换组件，更改 url 也可以很好地更改组件。 URL 中的参数也有效。 但现在我想将它作为插件集成到 Wordpress 中。该插件有效，并且反应应用程序显示在 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

显示反应应用的页面名称是“shorttest”。所以我尝试添加 RewriteRule： RewriteRule ^shorttest/(.*)$ /shorttest [QSA,L]

或

重写规则 ^shorttest/(.*)$ /index.php [QSA,L]

我删除了上面规则中的[L]。

但这不起作用。

这里是 react 应用程序的重要文件：

App.js

<BrowserRouter basename="/shorttest">
       <App/>
</BrowserRouter>

Blue.js

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


const BlueComponent = withRouter(props => <Blue {...props} />);
class Blue extends Component {

    render() {
        console.log(this.props.match);
        return (
            <div className="Blue">
                <header className="blue__header">
                    <nav className="BluelicationHeader__nav">
                        <ul className="BluelicationHeader__ul">
                            <li className="BluelicationHeader__li">
                                <Link className="Blue__a" to='/green'>Green</Link>
                            </li>
                        </ul>
                    </nav>
                </header>
                <div className="bluebackground">
                    <img className="blue__image" src={require(`./image/difficulty_3.png`)} alt="image"/>
                </div>
                <p className="Blue-intro">
                    parameter was {this.props.match.params.param}
                </p>
            </div>
        );
    }
}

export default BlueComponent;

Green.js

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;

package.json

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

有人知道我必须在 htaccess 中或在另一个 htaccess 中做什么吗？

感谢您的帮助。

Answer 1

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

这是一个很好的答案：

React Router Without Changing URL

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

如果只有 2 个组件，另一种选择是使用 Redux 之类的东西并自己处理路由。

Answer 2

这里是角路由器的解决方案：

在 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

Answer 3

我正在研究 Vue.js，遇到了同样的问题。

我现在找到了解决办法：你可以dump(new \WP_Rewrite())->rewrite_rules()来获取所有的WP路由规则（带Regex），至于vue-router，Regex可以直接用来设置动态路由。

目前我正在处理它，工作完成后我会在这里分享我的代码。

rewrite_rules 转储就像这样??