Javascript 当页面刷新时对路由中断作出反应

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

这些路线之一是

/blog/

路线。此路径是所有将要撰写的博客文章的归档页面。博客文章的单页位于

/blog/：title

路径。本例中的标题是文章的标题

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

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

唯一的问题是，当我查看一篇博客文章的单个页面，并刷新浏览器时，url会更改为

/

。此路由不存在，因此不显示任何内容

有人知道我怎样才能防止这种情况发生吗

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

路由器：

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

makeItems（项目）{
让navItems=[]
items.forEach（item=>{
if（项目.子项）{
item.children.forEach（child=>{
让ChildComponent=this.identifyComponent（child）
让childPathName=新URL（child.URL）.pathname
推(
)
})
}
让NavComponent=this.IdentificationComponent（项目）
让pathName=newURL（item.URL）.pathName
如果（item.title==“Home”）{
推(
(
this.props.startHomeSlider（）}
stopHomeSlider={（）=>this.props.stopHomeSlider（）}
标语={this.props.themeOptions.slawanion}
动画={this.props.animation}
currentCase={this.props.currentCase}
/>
)}
/>
)
}否则{
推(
)
}
})
返回导航项
}

.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

#开始WordPress
#De richtlijnen（regels）tussen'BEGIN WordPress'和'END WordPress'worden
#通过WordPress过滤器，Dynamics Aangemakt en zouden enkel Aangemakt经过mogen worden。
#这是一个很好的例子。
重新启动发动机
重写基/
重写规则^index\.php$-[L]
重写cond%{REQUEST_FILENAME}-F
重写cond%{REQUEST_FILENAME}-D
重写规则/index.php[L]
#结束WordPress

如果我看错了，我很抱歉……但看起来你正在使用你应该使用的地方

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

函数App（）{
返回(
);
}
导出默认应用程序；

然后我使用创建到帖子/页面的链接…“to”与“href”相同

{navItem.title}）；

现在，您将在浏览器地址栏中拥有正确的url…并且由于您的路由是静态的…将正确呈现页面

---

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

如果我看错了，我深表歉意…但看起来您正在使用您应该使用的位置

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

函数App（）{
返回(
);
}
导出默认应用程序；

然后我使用创建到帖子/页面的链接…“to”与“href”相同

{navItem.title}）；

现在，您将在浏览器地址栏中拥有正确的url…并且由于您的路由是静态的…将正确呈现页面

---

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

显然问题出在永久链接的WordPress设置上。因为设置说博客应该在

/

，但我的代码说它必须在

/blog/

，所以每当我刷新它时，它都会默认为WordPress的设置。

显然是错误的，是permalinks的WordPress设置。因为设置说博客应该在

/

，但我的代码说它必须在

/blog/

，所以每当我刷新时，它都会默认为WordPress的设置。

我还没有完全完成…但是你可以在这里看一看：我还没有完成…但是你可以在这里看一看：