В чем проблема TypeError: Cannot read property 'parentNode' of null?

Question

[Gimir]

Вот скрин кода:

При нажатии на любой из двух линков в консоли выдает эту ошибку - TypeError: Cannot read property 'parentNode' of null,
но в браузере все хорошо работает и по ссылкам переходит.
Использую React-router-dom

Answer 1

[Павел Диденко]

Покажите код роутера

Comments

[Gimir]

[Павел Диденко]

Gimir, полный код религия не позволяет скинуть? Какой именно Router вы используете?
import { Router } from 'react-router-dom';
или же

import { BrowserRouter as Router } from 'react-router-dom';

?

[Павел Диденко]

В общем если первый вариант - то замените на второй, должно заработать. Если второй вариант - то скиньте код в песочницу, посмотрю по факту

[Gimir]

Павел Диденко,

import { useHistory, BrowserRouter as Router,
        Switch,
        Route,
        Link
} from 'react-router-dom';

function App() {

  return (
    <Router>
      <main>
        <Header screenHandler={()=>{}} />

        <Switch>
          <Route exact path='/'>
            <BlogScreen posts={Posts} />
          </Route>
          <Route path='/post'>
            <PostScreen />
          </Route>
          <Route path='/edit'>
            <EditScreen onAddPostClick={createNewPost} onSavePostClick={changePost} />
          </Route>
        </Switch>
      </main>
    </Router>
  );
}

export default App;

[Павел Диденко]

Gimir, код MainButton выложите

[Gimir]

Павел Диденко,

import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.button`
    padding: 10px 20px;
    font-size: 15px;
    border: none;
    background-color: #fff;
    color: #000;
`;

const MainButton = ({children, onButtonClick}) => (
    <StyledButton onClick={onButtonClick}>{children}</StyledButton>
);

export default MainButton;

[Павел Диденко]

Gimir, проблема должна быть в этой кнопке, уберите ее из кода и все должно быть ок. Смотрите метод, который срабатывает в onClick, с ним что-то не так. Ну и судя по коду, вы не передаёте никакого метода, но вызываете его при клике

[Gimir]

Павел Диденко, не, кнопку я пробовал убрать, не помогло, даже когда я изменил url с помощью history.push() то страница сменилась но эта ошибка все равно выскакивала.

[Gimir]

Метод то я передаю, onButtonClick

[Павел Диденко]

Gimir, нет, вы метод достаете, но не передаете. Ваша кнопка рендерится в компоненте Header, но никакого метода в нее вы не передаете. То есть ваш метод в компоненте кнопки === undefined. Попробуйте вместо метода просто вставить () => {console.log('click)}

Если ошибка не исчезнет - скиньте ссылку на репозиторий

[Gimir]

Павел Диденко, проблема не исчезла, я начинаю думать что это конфликт каких-то зависимостей, вот ссылка на гит - https://github.com/Gimir/test-blog-app/tree/master...

[Павел Диденко]

Gimir, у меня нет ошибок ни с кнопкой, ни без нее

[Gimir]

Павел Диденко, тогда это точно конфликт, можете скинуть package.json?

[Павел Диденко]

Gimir, у меня он из вашего репозитория, соответственно такой же

[Gimir]

Павел Диденко, а в чем тогда может быть проблема, есть какие мысли?

[Павел Диденко]

Gimir, скачайте ваш репозиторий из гитхаба, возможно это избавит от ошибки. Но вообще ошибка сообщает о том, что что-то пытается прочитать свойство parentNode у undefined/null узла
Возможно еще в каком-то месте кода вы пытаетесь работать со свойством DOM-узла, а его нет

[Gimir]

Павел Диденко, я все таки думаю что это версии конфликтуют, просто я сначала сгенерировал проект с помощью create-react-app а потом установил react-router-dom, а вы все установили за раз... и вот я думаю что у вас create-react-app установил какой то пакет другой версии которая совместима с react-router-dom, не знаю, может create-react-app автоматически проверяет конфликтующие зависимости и подбирает версии при инициализации. В любом случае благодаря вам этот вопрос будет кому то полезен.
Я же в свою очередь убрал react-router-dom и сделал маршрутизацию через глобальный стейт, приложение то не большое.