@Anyade

Почему React-router не рендерит компоненты при переходе по ссылке?

Здравствуйте!

Я пишу небольшое react-redux spa приложение. Впервые пишу, поэтому сложно. С очередной проблемой справиться самостоятельно не получилось, прошу помощи у сообщества. Суть в следующем: использую react-router (v 5.0.0, если это важно), в приложении 2 route-компонента - PhotoList (path="/") и PhotoShow (/photos/:id). Есть еще Header, но он рендерится всегда, с каждым route-компонентом (структуру App.js ниже выкладываю).

Link'и есть:
- в Header (при нажатии на логотип ведет на '/', работает),
- в PhotoList (при нажатии на каждую фотку, ведет на отдельную страницу с этой фоткой '/photos/:id', где id - идентификатор фотки, работает),
- в PhotoShow (при нажатии на кнопку "закрыть" должна вести на '/', но не работает).

Если в PhotoShow нажать на кнопку "закрыть", в адресной строке изменится адрес, браузер сильно задумается, а потом напишет "Опаньки.. При загрузке этой страницы возникли неполадки"(Google chrome). Если перезагрузить страницу, все снова будет работать. При этом если нажать в PhotoShow на логотип в Header, то страница корректно отрендерит PhotoList.

Я не понимаю, в чем беда( Я читала, что возможно из-за Redux, но withRouter не дал результата. Пожалуйста, объясните мне, что не так, и как это исправить.

Код App.js:
import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import history from '../history';
import Header from './Header';
import PhotoList from './PhotoList';
import PhotoShow from './PhotoShow';
import './App.css';

const App = () => {
    return (
        <Router history={history}>
            <>
                <Header />
                <Switch>
                    <Route path="/" exact component={PhotoList} />
                    <Route path="/photos/:id" exact component={PhotoShow} />
                </Switch>
            </>
        </Router>
    );
};

export default App;


код PhotoShow.js:
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import './PhotoShow.css';

const PhotoShow = props => {
    const { urls, alt_description } = props.photo;

    return (
        <section className="photo-show">
            <h1 className="photo-show__title visually-hidden">
                Single photo view
            </h1>
            <div className="central-container">
                <div className="photo-show__card">
                    <img
                        className="photo-show__img"
                        src={urls.regular}
                        alt={alt_description}
                    />
                </div>
                <Link className="photo-show__close-btn" to="/">
                    Back to main
                </Link>
            </div>
        </section>
    );
};

PhotoShow.propTypes = {
    photo: PropTypes.object.isRequired,
};

const mapStateToProps = (state, ownProps) => {
    return {
        photo: state.photos.photos.filter(
            item => item.id === ownProps.match.params.id
        )[0],
    };
};

export default connect(mapStateToProps)(PhotoShow);


если нужно, готова скинуть весь архив, лишь бы нашли ошибку
  • Вопрос задан
  • 680 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы