Здравствуйте!
Я пишу небольшое 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);
если нужно, готова скинуть весь архив, лишь бы нашли ошибку
Простой
