React Router v4和htaccess与WordPress相关

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

页面名字叫做"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文件吗？

感谢您的帮助。

- fricko

Answer 1

以下是 Angular 路由的解决方案：

在 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 必须是页面的名称。 现在 Angular 路由器运行得非常完美。虽然未经过 React 路由器测试，但我认为问题应该相同，所以它应该可以工作。

如果它能正常工作，请告诉我们。

- fricko

Answer 2

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

现在我已经找到了一个解决方案：您可以转储(new \WP_Rewrite())->rewrite_rules()以获取所有WP路由规则（带有正则表达式），对于vue-router，可以使用正则表达式直接设置动态路由。

目前我正在处理这个问题，完成后我会在这里分享我的代码。

rewrite_rules 转储结果如下：

- Mashiro

Answer 3

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

这里有一个非常好的答案来解决这个问题：

React Router Without Changing URL

想象一下，如果你在同一页上有两个 React 组件，你也不会想使用 URL 路由。

另一个选择是使用类似 Redux 的东西，如果只有两个组件，可以自己处理路由。

- mikeb

---

好的，但这意味着在WordPress中无法使用URL来展示应用程序的特定组件或在React应用程序中使用浏览器导航，是吗？如果是这样，那会让我很难过。 - fricko

嘿@fricko，你找到解决方法了吗？我发现WP htaccess正在干扰我在子目录中尝试使用的React路由器URL链接。 - mediaguru

请看我上面描述的解决方案。它也适用于React。 - fricko