ReactJs this.props.router indefinito

Question

Ciao sto imparando Reagire js e ho incontrato un problem.When cerco di tornare alla pagina principale utilizzando reagire router io ottenere il seguente errore:

Uncaught TypeError: Cannot read property 'push' of undefined

Ecco il mio codice, come potete vedere sto chiamando la funzione Navigate:

miei Client.js con router:

Se sostituisco this.props.router.push('/'); con this.props.history.push('/');, funziona correttamente. Quale potrebbe essere il problema? Grazie per il tuo tempo.

Answer 1

Manca un metodo di costruzione con una chiamata a super(). super() chiama il costruttore della classe genitore ed è necessario per passare correttamente le proprietà della classe genitori a questo componente. Sarà necessario per accedere a qualsiasi proprietà passata al componente, incluso router.

La parte superiore della classe di layout dovrebbe apparire come questa.

export default class Layout extends React.Component { 
    constructor(props) { 
    super(props) 
    } 

    navigate() { 
    ... 
    } 

    render() { 
    ... 
    } 
} 

Here are the docs on how classes work in ES6!

Edit 1: Reagire Router

È inoltre necessario utilizzare il nuovo withRouter quando si fa la navigazione tramite this.props.router. Puoi farlo passando il tuo componente come argomento ed esportandolo. La funzione withRouter avvolge semplicemente il componente in un altro componente che passa il puntello del router al componente. Devo sottolineare che esistono altri modi per eseguire il routing programmatico (singleton, contesto, ecc.), Ma quando si utilizza this.props.router.push è necessario utilizzare withRouter.

import { withRouter } from 'react-router' 
class Layout extends React.Component { 
    constructor(props) { 
    super(props) 
    } 

    navigate() { 
    ... 
    } 

    render() { 
    ... 
    } 
} 

export default withRouter(Layout) 

Using withRouter