Вложенный компонент реакции (заголовок), приводящий к тому, что сайт не отвечает

Question

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

Несколько вещей, которые я пробовал, включают обновление компонентов, чтобы страница, включая заголовок, была заключена в тег фрагмента. Я также попытался поместить Заголовок в div, чтобы посмотреть, не остановит ли это поведение.

Вот Заголовок. js

export default class Header extends React.Component { 

    render() {
        return (
          <>  
            <header className="header__container">
                <img className="header__logo" src={logo} alt="company Logo" width='200' />
                <div className="header__title-container">
                  <h1 className="header__title">Angel Mortgage</h1>
                </div>
                <Nav />
            </header>
          </>  
        )
    }

И Инструменты. js

export default class Tools extends Component {
    render() {
        return (
            <>
            {/* <Header /> */}
            <NavLink className="nav__link" activeClassName="active" to='/MortgageRateEst'>Mortgage Rate Estimater</NavLink>
            <Route path='/MortgageRateEst' component={InputForm} />

            <Footer />
            </>
        );
    }

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

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

Есть предложения?

Спасибо.

Обновление

Дальнейшее устранение неполадок - я заменил вызов на заголовок реальным кодом, и у меня возникло такое же поведение (как и ожидалось) - страница не отвечает, и на консоли не регистрируется ошибка. Затем я удалил вызов связанного компонента Nav и обработанной страницы. Таким образом, опыт тот же - страница не отвечает и не регистрируется ошибок; это всего лишь один уровень глубже.

Нав код

    render() {
        return (
          <>
            <div className="nav__container">
                <NavLink className="nav__link" activeClassName="active" to='/Contact Us'>Contact Us</NavLink>
                <NavLink className="nav__link" activeClassName="active" to='/Mascot'>Mascot</NavLink>
                <NavLink className="nav__link" activeClassName="active" to='/Tools'>Tools</NavLink>
                <NavLink className="nav__link" activeClassName="active" to='/InputForm'>Mortgage Rate Estimate</NavLink>
                <NavLink className="nav__link" activeClassName="active" to='/Payment Calculator'>Payment Calculator</NavLink>
                <Route path='/InputForm' component={InputForm} />
                <Route path='/Payment Calculator' component={PaymentAmort} />
                <Route path='/Contact Us' component={ContactForm} />
                <Route path='/Mascot' component={Mascot} />
                <Route path='/Tools' component={Tools} />
            </div>
          </>
        )
    }
}```

Answer 1

Начиная с React v16.2 React.Fragment позволяет компонентам возвращать несколько дочерних элементов. Выполнение <> аналогично <React.Fragment>.

Попробуйте явно ввести <React.Fragment>, потому что некоторые инструменты сборки имеют проблемы с <>.

export default class Tools extends Component {
    render() {
        return (
            <React.Fragment>
                {/* <Header /> */}
                <NavLink className="nav__link" activeClassName="active" to='/MortgageRateEst'>Mortgage Rate Estimater</NavLink>
                <Route path='/MortgageRateEst' component={InputForm} />

                <Footer />
            </React.Fragment>
        );
    }
}