Почему не работает React Router?

Question

[Сергей]

Только начинаю разбираться с React.

Зависает приложение вместе с браузером (не закрыть вкладку) при попытке перехода по ссылке в mainNav. Если c App попытаться перейти на другую страницу About, в которой в return что угодно, кроме импортированного компонента, то все ок, но если передать компонент, тогда все зависает. Ошибок не выдает. Вроде все по инструкциям react-router-dom, но видимо что-то упускаю. Url прописывает при клике, но дальше никуда. Подскажите, пожалуйста, что не так?

Есть index.js

ReactDOM.render( <App />, document.getElementById('root'));

Есть App.js

import React from 'react';
import {BrowserRouter} from 'react-router-dom';

import PageHeader from './blocks/pageHeader/PageHeader';
import MainBlock from './blocks/mainBlock/MainBlock';
import PageFooter from './blocks/pageFooter/PageFooter';
import './App.scss';

function App() {
  return (
    <BrowserRouter>
      <div className="app">
        <PageHeader isMain="false"/>
        <MainBlock />
        <PageFooter />
      </div>
    </BrowserRouter>
  );
}

export default App;

Есть About.js

import React from 'react';
import PageHeader from './blocks/pageHeader/PageHeader';
import MainBlock from './blocks/mainBlock/MainBlock';
import PageFooter from './blocks/pageFooter/PageFooter';
import './App.scss';

function About() {
  return (
    <div className="about">
      <PageHeader />
      <MainBlock />
      <PageFooter />
    </div>
  );
}

export default About;

Есть PageHeader.js

import React from 'react';
import Logo from '../../components/logo/Logo';
import MainNav from '../mainNav/MainNav';

class PageHeader extends React.Component {
    render() {
        return (
            <header className='page-header'>
                <div className="wrap page-header__wrap">
                    { this.props.isMain ? <Logo isMain="true"/> : <Logo /> }
                    <MainNav />
                </div>
            </header>
        )
    }
};

export default PageHeader;

И финальный MainNav.js

import React from 'react';
import {Switch, Route, Link} from 'react-router-dom';
import Burger from '../../components/burger/Burger';
import About from '../../About';
import Contacts from '../../Contacts';

class MainNav extends React.Component {
    
    render() {
        const navItems = [
            {
                url: '/about',
                text: 'qwerty'
            },
            {
                url: '/contacts',
                text: 'qwerty'
            },
        ];
    
        const navList = navItems.map((item, index) => {
            return <li className="main-nav__item" key={'navItem' + index}>
<Link to={item.url} className="main-nav__link">{ item.text }</Link></li>;
        });
        
        return (
         
                <nav className='main-nav rotated'>
                    <ul className="main-nav__list">
                        { navList }
                    </ul>
                    <Burger newClass='main-nav__burger'/>
                    <Switch>
                        <Route exact path='/about' component={About} />
                        <Route exact path='/contacts' component={Contacts} />
                    </Switch>
                </nav>
      
        )
    }
};

export default MainNav;

Answer 1

[paoluccio]

Ваш код работает
Ошибка в чём-то другом. Попробуйте открыть ваше приложение в режиме инкогнито или обновите react-router-dom.

Comments

[Сергей]

Спасибо. Да ошибка в другом. Но по-прежнему не понятно в чем(
Если в return возвращать любое содержимое, то все ок

import React from 'react';
import PageHeader from './blocks/pageHeader/PageHeader';
import MainBlock from './blocks/mainBlock/MainBlock';
import PageFooter from './blocks/pageFooter/PageFooter';
import './App.scss';

function About() {
  return (
    <div className="about">
      1
    </div>
  );
}

export default About;

Но если попытаться вывести импортированный компонент, тогда все начинает подвисать, как и писал. словно съедается оперативка.

import React from 'react';
import PageHeader from './blocks/pageHeader/PageHeader';
import MainBlock from './blocks/mainBlock/MainBlock';
import PageFooter from './blocks/pageFooter/PageFooter';
import './App.scss';

function About() {
  return (
    <div className="about">
      <PageHeader />
      <MainBlock />
      <PageFooter />
    </div>
  );
}

export default About;

[Сергей]

Также не работает и в вашем Sandbox(

[paoluccio]

Ну теперь, после того как показали <About />, всё стало ясно.

Вот приблизительная структура вашего PageHeader:

<PageHeader>
  <MainNav>
    <Switch>
      <Route exact path='/about' component={About} />
      <Route exact path='/contacts' component={Contacts} />
    </Switch>
  </MainNav>
</PageHeader>

А это About:

<About>
  <PageHeader />
  <MainBlock />
  <PageFooter />
</About>

Вы внутри <PageHeader /> рендерите <About />, который внутри себя вновь рендерит <PageHeader />... ну и так по кругу. Вот вам и забитый браузерный стек.

[Сергей]

paoluccio, Спасибо! Да, была рекурсия

Answer 2

[lnked]

попробуйте использовать NavLink вместо Link