wordpress - 使用 WordPress 响应 Router v4 和 htaccess

Question

我制作了一个包含两个组件的简单 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

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

或

RewriteRule ^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主题或插件中，您需要在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 必须是页面的名称。现在，角度路由器工作完美。它没有使用 React Router 进行测试，但我认为这是同样的问题，所以它应该可以工作。

如果有效，请告诉我们。H