reactjs - React-router v4 this.props.history.push(…) no funciona

this.props.history.push params

Question

Estoy intentando enrutar programáticamente usando this.props.history.push(..) pero no parece funcionar.

Aquí está el enrutador:

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

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

En CustomerList, se muestra una lista de clientes. Al hacer clic en un cliente (li) se debe hacer la ruta de la aplicación al Cliente:

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;

El código es parcial pero ilustra perfectamente la situación. Lo que sucede es que la barra de direcciones del navegador cambia de acuerdo con history.push (..), pero la vista no se actualiza, el componente del Cliente no se procesa y la Lista de Clientes todavía está allí. ¿Algunas ideas?

Answer 1

Así que llegué a esta pregunta con la esperanza de obtener una respuesta, pero fue en vano. he utilizado

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

En el mismo proyecto y funcionó como se esperaba. Tras una experimentación adicional y algunos comparaciones y contrastes, me di cuenta de que este código no se ejecutará si se llama dentro del componente anidado . Por lo tanto, solo el componente de página renderizado puede llamar a esta función para que funcione correctamente.

Encuentra Working Sandbox here

• historia: v4.7.2
• reaccionar: v16.0.0
• reaccion-dom: v16.0.0
• reaccion-router-dom: v4.2.2

Answer 2

Necesitas unir handleCustomerClick :

class Customers extends Component {
  constructor() {
    super();
    this.handleCustomerClick = this.handleCustomerClick(this)
  }

Answer 3

No utilice con enrutador.

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);
      }
   })
}

Funciona bien.

Answer 4

Para mí (react-router v4, react v16) el problema era que tenía el componente de navegación de acuerdo:

import { Link, withRouter } from ''react-router-dom''

class MainMenu extends Component {

  render() {
    return (
            ...
            <NavLink to="/contact">Contact</NavLink>
            ...
    );
  }
}

export default withRouter(MainMenu);

Ambos usando cualquiera

to="/contact" 

o

OnClick={() => this.props.history.push(''/contact'')}; 

El comportamiento seguía siendo el mismo: la URL en el navegador cambió pero se procesaron los componentes incorrectos, se llamó al enrutador con la misma URL antigua.

El culpable estaba en la definición del router. ¡Tuve que mover el componente MainMenu como hijo del componente Router!

// wrong placement of the component that calls the router
<MainMenu history={this.props.history} />
<Router>
   <div>
     // this is the right place for the component!
     <MainMenu history={this.props.history} />
     <Route path="/" exact component={MainPage} />
     <Route path="/contact/" component={MainPage} />
   </div>
</Router>

Answer 5

Parece que las cosas han cambiado un poco en la última versión del router de reacción. Ahora puedes acceder al historial a través del contexto. this.context.history.push(''/path'')

También vea las respuestas a este problema de github: https://github.com/ReactTraining/react-router/issues/4059

Answer 6

Parece una vieja pregunta pero sigue siendo relevante.

Creo que es un problema de actualización bloqueada .

El principal problema es que la nueva URL (ruta) debe ser representada por el mismo componente ( Costumers ) en el que se encuentra actualmente (URL actual).

Así que la solución es bastante simple, haga que la url de la ventana sea un apoyo, para que reaccione tenga la oportunidad de detectar el cambio de prop (por lo tanto, el cambio de la url) y actúe en consecuencia.

Un buen caso de uso descrito en el blog oficial de reacción llamado Recomendación: Componente totalmente incontrolado con una clave .

Entonces, la solución es cambiar de render() { return( <ul>

para render() { return( <ul key={this.props.location.pathname}>

Entonces, cada vez que la ubicación cambiaba por react-router, el componente se desechaba (reaccionando) y uno nuevo se iniciaba con los valores correctos (reaccionaba).

Ah, y pase la location como prop al componente ( Costumers ) donde ocurrirá la redirección si no se ha pasado ya.

Espero que ayude a alguien.

Answer 7

Puedes intentar cargar el componente hijo con historial. para ello, pasa la ''historia'' a través de accesorios. Algo como eso:

  return (
  <div>
    <Login history={this.props.history} />
    <br/>
    <Register/>
  </div>
)

Answer 8

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