页面刷新时响应路由中断

Question

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

其中一条路线是 /blog/ 路线。该路由是所有将要撰写的博客文章的存档页面。博客文章的单页位于/blog/:title 路由。本例中的标题是 post.

的标题

根据这个标题，我请求检索单页所需的信息。

以上几乎完美，内容显示在正确的位置，调用都成功。

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

有谁知道如何防止这种情况发生？

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

路由器：

<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;

然后我使用创建指向 posts/pages 的链接...'to' 与 'href' 相同。

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

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

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

Answer 2

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

页面刷新时响应路由中断

React route breaking when page gets refreshed

javascript

reactjs

react-router

wordpress-rest-api