TypeError: Невозможно прочитать свойство "content" из неопределенного

Question

React app route возвращает ошибку при перезагрузке страницы в браузере.

На моей целевой странице есть раздел блога с кнопками, которые ссылаются на страницу с полным списком статей блога и другим набором страниц.та ссылка на полные статьи для каждой записи в блоге.Я добавляю записи блога из WordPress через его API и использую Context для управления состоянием и обмена данными с моими компонентами.Я использую React Router для перехода от целевой страницы к списку статей и каждой полной статье.Структура маршрута с целевой страницы: "/articles/:postId".

Мне удалось отобразить отдельные полные статьи при нажатии кнопки" читать дальше ".Однако, когда я перезагружаю браузер на странице с полной статьей, я получаю сообщение об ошибке, которое совпадает с названием моего поста.Глядя на консоль, я вижу следующие ошибки:

"Uncaught TypeError: Невозможно прочитать свойство 'content' из неопределенного"

"index.js: 1446 В компоненте произошла вышеуказанная ошибка:в статье (созданной Route) в Route (в App.js: 19) в Switch (в App.js: 16) в Provider (в App.js: 15) в Router (создан BrowserRouter) в BrowserRouter (в App.js: 14) в приложении (на src "

Я ничего не пытался исправить, так как не уверен, что является источником этой конкретной ошибки. Я даже не могу вернуться назад в своем браузеречтобы очистить его. Мне нужно вернуться на свою целевую страницу и перезагрузить браузер, чтобы устранить проблему.

Context.js:

const Context = React.createContext();

export class Provider extends Component{
    constructor(){
        super();
        this.state={
            content: ''
        }
    }

    componentDidMount(){
        fetch('url')
        .then(res => res.json())
        .then(data => this.setState({
            content: data
        }));
    }

    render(){
        return(
            <Context.Provider value={this.state}>
                {this.props.children}
            </Context.Provider>
        )
    }
}

export const Consumer = Context.Consumer;

Настройка маршрута:

 return (
    <Router>
      <Provider>
        <Switch>
          <Route path="/" exact component={Home}/>
          <Route path="/articleList/" exact component={ArticleList}/>
          <Route path={`/articleList/:articleId`} component={Article}/>
        </Switch>
      </Provider>
    </Router>
);

Код компонента статьи:

const Article = ({match}) => {
return(
  <Consumer>
    {value => {
      const [...articles] = value.content;

      const res = articles.find(article=> article.id === parseInt(match.params.articleId))

      return(
          <ArticleBody content={res.content.rendered}/>
      )

    }}
  </Consumer>
)
}

Я надеюсь, что смогу перезагрузить страницы, не увидев этих ошибок.