Question

我制作了一个简单的React App，它有两个组件，可以通过链接从一个组件路由到另一个组件。如果页面是独立的，则效果很好。通过应用程序内部的链接，可以切换组件，更改URL也可以更好地更改组件。 URL中的参数也正常工作。但现在我想将它作为插件集成到Wordpress中。插件工作，反应应用程序在wordpress页面上显示。路由器在应用程序内部工作。但是如果我更改网址，则无法在组件之间切换我知道这是正确配置.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

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

或

RewriteRule ^ shorttest /(.*)$ /index.php [QSA，L]

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

但这不起作用。

这里是来自反应应用程序的重要文件：

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中做什么吗？

Thanx求助。

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

Answer 2

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

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

>

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

rewrite_rules 转储就像这样??

Answer 3

我真不会愚弄Wordpress＆＃39; .htaccess文件。相反，我会在你的React组件中存储路由，而根本不使用URL。

对于如何做到这一点，这是一个非常好的答案：

React Router Without Changing URL

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

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

使用wordpress反应路由器v4和htaccess

3 个答案: