我试图路由到一个组件在React从一个组件呈现在WordPress页面上.现在搜索Link下面是从一个组件呈现在WordPress页面上的链接，我试图点击搜索时得到PageFetch组件.但当我点击，我只看到浏览器中的url更改为/wordpress/search，但它不会去任何地方。控制台中没有错误，我没有看到PageFetch组件中的console.log语句。

const HomePageFlightContainer  = () => {
    return (
        <Router>
        ....
    <div className="col-lg-3">                    
                          <Link to="/wordpress/search" className="theme-btn w-100 text-center margin-top-20px">
                          Search Now
                        </Link>                    
            
                      </div>
          ....
          </Router>
      );
}

字符串
这是我的react index.js

import HomePageFlightContainer from './HomePageFlightContainer';
import PageFetch from './PageFetch';
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const App = () => {
    return (
        <Router >
            
                <Switch>
                   <Route  path="/" component={HomePageFlightContainer} />
                    <Route  path="/wordpress/search" component={PageFetch} />
                </Switch>
            
        </Router>
    );
};

export default App;
ReactDOM.render(<HomePageFlightContainer />, document.getElementById('search-flights-container'));

型
下面是我的PageFetch组件（点击后我想去的地方）

import { useState, useEffect } from 'react';
import axios from 'axios';

const PageFetch = (slug) => {
    const [pageContent, setPageContent] = useState('');
          console.log("response content:::", page.content)
           ... //get wordpress page here through axios
            });
    }, []);

    return (
        <div>
            <h1>Search Page</h1>
            {loading ? (
                <p>Loading...</p>
            ) : (
                <div dangerouslySetInnerHTML={{ __html: pageContent }} />
            )}
        </div>
    );
};    
export default PageFetch;

型
我也遇到了，我将需要添加重写规则在.htaccess文件.所以我检查，我已经在.htaccess下面的内容.我也尝试注解# RewriteBase /wordpress/行.htaccess

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
# RewriteBase /wordpress/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wordpress/index.php [L]
</IfModule>

# END WordPress

型
并将AllowOverride None更改为

<Directory />
    Options Indexes FollowSymLinks
    AllowOverride All
</Directory>

型
如前所述here
我如何使React路由工作的WordPress？

编辑根据以下建议，我正在编辑以包含更多信息

我有一个WordPress的网站，加载了一个没有React的homepage.php，其中包括一个“立即搜索”按钮（代码如下），当点击是去结果页，我是diapplaying结果页使用React。直到现在一切都很好

<div class="col-lg-3">
                            <a
                              href="<?php echo get_permalink( get_page_by_path( 'flight-search-result' ) ); ?>"
                              class="theme-btn w-100 text-center margin-top-20px" onclick="FrontPage.setValuesForExtendedSearch()"
                              >Search Now</a
                            >
                          </div>

型
现在我想根据用户正在搜索的内容在这个“立即搜索”按钮下面显示一些来自外部API的信息。所以我想到了React解决方案，但“立即搜索”容器呈现为非React方式（如前所述），所以我改变了容器通过React渲染，但现在的问题是从这个React呈现的“立即搜索”转到搜索结果页面按钮被点击。这是当我研究React路由，也无头WordPress的，使所有这些工作。但有困难，如上述问题