我创建了一个简单的React应用程序,其中包含两个组件,可以通过链接从一个组件路由到另一个组件。如果页面是独立的,则可以正常工作。在应用程序内部使用链接可以切换组件,并且更改URL也可以正常更改组件。URL中的参数也可以正常工作。
但现在我想将其集成到WordPress作为插件。插件可以正常工作,React应用程序显示在WordPress页面上。路由器在应用程序内部工作。但是,如果我更改URL,则无法在组件之间切换。
我知道这是.htaccess文件正确配置的问题。 Wordpress的原始.htacces如下:
页面名字叫做"shorttest",我试着添加RewriteRule规则:
RewriteRule ^shorttest/(.*)$ /shorttest [QSA,L]
或
RewriteRule ^shorttest/(.*)$ /index.php [QSA,L]
并删除了上述规则中的[L]。但是这并没有起作用。
下面是React应用程序中的重要文件:
App.js
我知道这是.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文件吗?
感谢您的帮助。