Реагировать на разрыв маршрута при обновлении страницы - PullRequest
Новая
       11

Реагировать на разрыв маршрута при обновлении страницы

1 голос
/ 15 января 2020

Я работаю над проектом с WordPress REST API и ReactJS. Чтобы заставить работать маршрутизацию, я создал настраиваемую конечную точку для извлечения всех основных страниц навигации. На основе этих страниц я динамически создаю новые маршруты React.

Одним из этих маршрутов является маршрут /blog/. Этот маршрут является страницей архива для всех статей блога, которые будут написаны. Одна страница статьи блога находится по маршруту /blog/:title. заголовок в этом случае является заголовком поста.

На основании этого заголовка я делаю запрос на получение информации, необходимой для одностраничной страницы.

Вышеописанное работает почти идеально, контент показывается в правильных местах, и все звонки успешны.

Единственная проблема заключается в том, что при просмотре одной страницы блога статье, и я обновляю sh моего браузера, 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

Ответы [ 2 ]

0 голосов
/ 27 января 2020

Очевидно, что ошибкой были настройки WordPress для постоянных ссылок. Поскольку в настройках указано, что блоги должны быть на /<title of post>, но в моем коде указано, что они должны быть на /blog/<name of post>, поэтому всякий раз, когда я обновляю их, по умолчанию устанавливаются настройки WordPress.

0 голосов
/ 21 января 2020

Я прошу прощения, если я смотрю на это неправильно ... но похоже, что вы используете , где вы должны использовать .

В моем приложении WordPress / React есть все Routing в приложении. 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;

Затем я использую для создания ссылок на сообщения / страницы ... 'to' - это то же самое, что и 'href'. 

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

Теперь у вас будет правильный URL в адресной строке браузера ... и, поскольку ваши маршруты устарели c ... будет правильно отображать страницу.

Когда вы обновите sh страница ... React будет использовать ту же маршрутизацию и отобразит страницу так же, как это было до refre sh.

...