Родительский компонент использует redux для подключения.
Ожидаемое поведение : - перезагрузить и остаться на странице родительского компонента
Поведение : - перезагрузить и перенаправить на страницу входа
Я подумал, что может быть лучше использовать history.pu sh или подключить страницу, но не понял. Можете ли вы помочь?
Вот как подключена родительская страница:
import React, { Component} from "react";
import { connect } from 'react-redux';
import { Link} from 'react-router-dom';
import Home from '../../_containers/Films/Home';
import Header from '../../_components/Films/Header';
import Footer from '../../_components/Films/Footer';
import MoviesList from '../../_components/Movies/MoviesList';
class FilmPage extends Component {
// ... component code
}
function mapState(state) {
const { authentication: { user } } = state;
return { user };
}
const connectedFilmPage = connect(mapState)(FilmPage);
export { connectedFilmPage as FilmPage };
Вот страница с window.location.reload () в классе DeleteMov ie
import React, { Component } from 'react'
import ReactTable from 'react-table'
import api from '../../_api'
import { history } from "../../_helpers";
import styled from 'styled-components'
import 'react-table/react-table.css'
const Wrapper = styled.div`
padding: 0 0px 0px 0px;
`
class UpdateMovie extends Component {
updateId = event => {
event.preventDefault()
history.push(`/movies/update/${this.props.id}`)
}
render() {
return <button onClick={this.updateId}>Modifier</button>
}
}
class DeleteMovie extends Component {
deleteId = event => {
event.preventDefault()
if (
window.confirm(
`Voulez vous supprimer le film ${this.props.id} de manière permanente ?`,
)
) {
api.deleteMovieById(this.props.id)
window.location.reload()
//history.push(`/film/`)
}
}
render() {
return <button onClick={this.deleteId}>Supprimer</button>
}
}
class MoviesList extends Component {
constructor(props) {
super(props)
this.state = {
movies: [],
columns: [],
isLoading: false,
}
}
componentDidMount = async () => {
this.setState({ isLoading: true })
await api.getAllMovies().then(movies => {
this.setState({
movies: movies.data.data,
isLoading: false,
})
})
}
render() {
const { movies, isLoading } = this.state
const { user, users } = this.props;
const columns = [
{
Header: 'Film',
accessor: 'name',
//filterable: true,
},
{
Header: 'N°CNC',
accessor: 'isan',
//filterable: true,
},
{
Header: 'N°ISAN',
accessor: 'cnc',
Cell: props => <span>{props.value.join(' / ')}</span>,
},
{
Header: '',
accessor: '',
Cell: function(props) {
return (
<span>
<DeleteMovie id={props.original._id} />
</span>
)
},
},
{
Header: '',
accessor: '',
Cell: function(props) {
return (
<span>
<UpdateMovie id={props.original._id} />
</span>
)
},
},
]
let showTable = true
if (!movies.length) {
showTable = false
}
return (
<Wrapper>
{showTable && (
<ReactTable
data={movies}
columns={columns}
loading={isLoading}
//defaultPageSize={10}
showPagination={false}
showPageSizeOptions={false}
minRows={0}
/>
)}
</Wrapper>
)
}
}
export default MoviesList