web-dev-qa-db-fra.com

Historique du ReactJS Router V4.Push ne fonctionne pas

J'ai mis à niveau le logiciel React Router V4 et je rencontre maintenant des difficultés avec la méthode history.Push.

J'ai un fichier index.js:

import React from "react";
import { render } from "react-dom";
import { BrowserRouter, Route } from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory();

import { Main} from "./components/Main";
import { About } from "./components/About";
import { Cars} from "./components/Cars";


class App extends React.Component {

render() {
    return (
        <BrowserRouter history={history}>

            <div>
                <Route path={"/"} component={Main} />
                <Route path={"/cars"} component={Cars}/>
                <Route path={"/about"} component={About}/>
            </div>
        </BrowserRouter>
    )
  }
}

render(<App/>, window.document.getElementById("app"));

Et puis j'ai un autre fichier, où j'ai ajouté un simple pour revenir à une certaine page qui ressemble à ceci:

import React from "react";
import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory();

export class Cars extends React.Component {
  navigateBack() {
    history.Push('/')
  }

  render() {
    return(
        <div>
            <h3>Overview of Cars</h3>
            <p>Model: </p>
            <button onClick={this.navigateBack} className="btn btn-primary">Back</button>
        </div>
    )
  }
}

Donc, je ne peux pas comprendre ce qui ne va pas ici. Lorsque je clique sur le bouton, l'URL devient /, mais c'est tout. Y a-t-il quelqu'un qui peut m'aider?

MODIFIER

J'ai découvert que ça marche quand je fais ça:

this.props.history.Push('/home')

et 

<button onClick={this.onNavigateHome.bind(this)}

mais cela semble faux quelque part ??

quand je fais 

this.context.history.Push('/home')

Je reçois Cannot read property 'context' of null mais pourquoi ?? Ma configuration <BrowserRouter> est-elle incorrecte ??

Quoi qu'il en soit, merci pour l'aide :)

reactjsreact-routerreact-router-v4
10
ST80

Avec v4, vous devez utiliser this.context.history.Push('/cart');
Découvrez ces articles pour plus d'informations:

Comment faire pour pousser à l'historique dans React Router v4?

history.Push ne fonctionne pas lors de l'utilisation de BrowserRouter

1
paul

Essayez d’ajouter forceRefresh = {true} à votre BrowserRouter.

<BrowserRouter forceRefresh={true}>
0
Novia Lim