React-router v4 this.props.history.push (...) nie działa

Question

Próbuję programowo trasować przy użyciu this.props.history.push(..), ale nie wydaje się działać.

Oto router:

import { 
BrowserRouter as Router, 
Route 
} from 'react-router-dom'; 

<Router> 
<Route path="/customers/" exact component={CustomersList} /> 
<Route path="/customers/:id" exact component="{Customer} /> 
</Router> 

W CustomerList, lista klientów jest renderowane. Kliknięcie klienta (li) powinno skierować aplikację do Klienta:

import { withRouter } from 'react-router' 

class Customers extends Component { 
    static propTypes = { 
    history: PropTypes.object.isRequired 
    } 

handleCustomerClick(customer) { 
    this.props.history.push(`/customers/${customer.id}`); 
} 

render() { 
    return(
    <ul> 
     { this.props.customers.map((c) => 
     <li onClick={() => this.handleCustomerClick(c)} key={c.id}> 
      {c.name} 
     </li> 
    </ul> 
) 

} 
} 

//connect to redux to get customers 

CustomersList = withRouter(CustomersList); 
export default CustomersList; 

Kod jest częściowy, ale doskonale ilustruje sytuację. Co się dzieje, że pasek adresu przeglądarki zmienia się odpowiednio do historii.push (..), ale widok nie aktualizuje się, komponent klienta nie jest renderowany, a lista klientów jest tam nadal. Jakieś pomysły?

Answer 1

Wygląda na to, że trochę się zmieniło w najnowszej wersji routera reagowania. Możesz teraz uzyskać dostęp do historii poprzez kontekst. this.context.history.push('/path')

Zobacz także odpowiedzi na kwestię tego github: https://github.com/ReactTraining/react-router/issues/4059

Answer 2

Nie stosować z routerem.

handleSubmit(e){ 
    e.preventDefault(); 
    this.props.form.validateFieldsAndScroll((err,values)=>{ 
     if(!err){ 
     this.setState({ 
      visible:false 
     }); 
     this.props.form.resetFields(); 
     console.log(values.username); 
     const path = '/list/'; 
     this.props.history.push(path); 
     } 
    }) 
} 

Działa dobrze.

Answer 3

Więc przyszedłem do tego pytania mając nadzieję na odpowiedź, ale bez skutku. Użyłem

const { history } = this.props; 
history.push("/thePath") 

W tym samym projekcie i działało zgodnie z oczekiwaniami. Po dalszych eksperymentach i niektórych porównaniach i kontrastach zdałem sobie sprawę, że ten kod nie zostanie uruchomiony, jeśli zostanie wywołany w komponencie zagnieżdżonym. Dlatego tylko renderowany komponent strony może wywołać tę funkcję, aby działała poprawnie.

Znajdź Sandbox robocza here

• historia: v4.7.2
• reagują: v16.0.0
• reagować-dom: v16.0.0
• reagować-Router-dom: v4.2.2