Question

我正在使用WordPress REST API和ReactJS进行项目。为了使路由正常工作，我创建了一个自定义端点来检索所有主要的导航页面。基于这些页面，我动态创建了新的React路由。

这些路由之一是/blog/路由。此路由是将要编写的所有博客文章的存档页面。博客文章的单页位于/blog/:title路线。在这种情况下，标题就是帖子的标题。

基于此标题，我请求检索单页所需的信息。

上面的方法几乎可以正常工作，将内容显示在正确的位置，并且调用都成功。

唯一的问题是，当我查看博客文章的单页并刷新浏览器时，URL更改为/<title of the post>/。该路由不存在，因此不显示任何内容。

有人知道我如何防止这种情况发生吗？

代码（如果需要更多代码，请告诉我）：

路由器：

<Router>
  <Header
    absolute={this.state.absolute}
    headerColor={this.state.headerColor}
    items={this.state.navItems}
  />
  <Routes
    // Props for the routes component
  />
  <Route
    key='/blog/:title/'
    path='/blog/:title/'
    component={BlogPost}
  />
</Router>

动态生成路线的功能：

makeItems(items) {
  let navItems = []
  items.forEach(item => {
    if (item.children) {
      item.children.forEach(child => {
        let ChildComponent = this.identifyComponent(child)
        let childPathName = new URL(child.url).pathname

        navItems.push(
          <Route
            key={child.id}
            path={`${childPathName}`}
            component={ChildComponent}
          />
        )
      })
    }

    let NavComponent = this.identifyComponent(item)
    let pathName = new URL(item.url).pathname

    if (item.title === "Home") {
      navItems.push(
        <Route
          exact
          key={pathName}
          path={`${pathName}`}
          render={() => (
            <NavComponent
              startHomeSlider={() => this.props.startHomeSlider()}
              stopHomeSlider={() => this.props.stopHomeSlider()}
              slogan={this.props.themeOptions.slogan}
              animation={this.props.animation}
              currentCase={this.props.currentCase}
            />
          )}
        />
      )
    } else {
      navItems.push(
        <Route
          exact
          key={pathName}
          path={`${pathName}`}
          component={NavComponent}
        />
      )
    }
  })

  return navItems
}

.htaccess文件：

# BEGIN WordPress
# De richtlijnen (regels) tussen `BEGIN WordPress` and `END WordPress` worden
# dynamisch aangemaakt en zouden enkel aangepast mogen worden via WordPress filters.
# Elke wijziging aan deze richtlijnen tussen deze markeringen worden overschreven.
<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

Answer 1

如果我看错了，我深表歉意...但是看来您使用的是，应该使用。

我的WordPress / React应用程序具有App.js中的所有路由...

 function App() { 

  return (
    <div className="app-wrapper page" style={{minHeight: '100vh'}}>
      <Router>
        <Navibar />
        <Switch>
          <Route path="/category/:title" exact component={Posts} />
          <Route path="/category/:title/page=:pageNum" exact component={Posts} />
          <Route path="/tag/:tag" exact component={Posts} />
          <Route path="/archive/:year/:month" exact component={Posts} />
          <Route path="/:post/:id/" exact component={Posts} />
          <Route path="/page=:blogPage" exact component={Posts} />
          <Route path="/:id/" exact component={Page} />
          <Route path="/" exact component={Homepage} />
        </Switch>
        <Footer />
      </Router>
    </div>
  );
}

export default App;

然后，我使用创建指向帖子/页面的链接...“至”与“ href”相同。

<Link key={navItem.ID} to="/post/hello-world/" className="navbar-right nav-link">{navItem.title}</Link>);

现在，您将在浏览器地址栏中输入正确的网址...并且由于您的路线是静态的...将正确呈现页面。

刷新页面时... React将使用相同的路由并呈现与刷新之前相同的页面。

Answer 2

显然，错误的是永久链接的WordPress设置。由于设置说博客应该位于/<title of post>，但是我的代码说博客必须位于/blog/<name of post>，所以每当刷新时，它将默认为WordPress的设置。

页面刷新时反应路由中断

2 个答案: