web-dev-qa-db-fra.com

reactjs - ne peut pas lire la propriété Push d'undefined

J'ai ce code. Ce que je veux faire, c'est que lorsque je clique sur un bouton 'fonctionnalité', il me faudra indexer route. Cependant, React continue à dire «ne peut pas lire la propriété Push of indéfini» Qu'est-ce que j'ai mal fait?

route.js

import React from "react";
import ReactDOM from "react-dom";
import {Router, Route, hashHistory, IndexRoute } from "react-router";

import Layout from "./page/Layout";
import Features from "./page/Features";
import Features from "./page/archive";

const app = document.getElementById('app');

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Layout}>
            <IndexRoute component={Features} />
            <Route path="archive" component={Archive} />
        </Route>
    </Router>, app);

Composant de mise en page

import React from "react";
import {Link, Router, Route, hashHistory} from "react-router";
export default class Layout extends React.Component{
    navigate(){
        this.context.router.Push('/');
    }
    render(){ 
        return(
            <div>
                {this.props.children}
                <button onClick={this.navigate.bind(this)}>feature</button>
            </div>
        )
    }
}

package.json - partiel

"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-router": "^2.0.1"
 "history": "^2.0.1",

------------- mise à jour de la réponse de la Jordanie -------------

javascriptreactjsreact-router
5
angry kiwi
export default class Layout extends React.Component{

    navigate = () => {
        this.context.router.Push('/');
    }
    render(){ 
        return(
            <div>
                {this.props.children}
                <button onClick={this.navigate.bind(this)}>feature</button>
            </div>
        )
    }
}
Layout.contextTypes = {
    router: PropTypes.object.isRequired
}
0
angry kiwi

Dans React Router v4, vous n’avez plus à donner d’historique à votre routeur. Au lieu de cela, vous utilisez simplement BrowserRouter ou HashRouter de 'react-router-dom'. Mais cela rend difficile de savoir comment insérer une déroute dans votre historique lorsque vous n'êtes pas dans un composant de réaction.

La solution consiste à utiliser le paquet history .

Importez simplement createHistory comme ceci:

import createHistory from 'history/createBrowserHistory'

Ou comme je le fais c'est comme ça:

import { createHashHistory } from 'history'

alors créez votre histoire

export const history = createHashHistory()

et maintenant vous pouvez y pousser:

history.Push('/page')

J'espère que cela aide les autres qui viennent à cette question. Aucune des réponses actuelles ne m'a donné ce dont j'avais besoin.

10
Wylliam Judd

Vous devez changer votre page route.js en 

import {Router, browserHistory} from 'react-router';

ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" component={Layout}>
            <IndexRoute component={Features} />
            <Route path="archive" component={Archive} />
        </Route>
    </Router>, app);

Et puis, partout où vous voulez naviguer, vous pouvez utiliser 

 import {Router, browserHistory} from 'react-router';

 browserHistory.Push('/');

La documentation de react-router vous encourage à utiliser browserHistory au lieu de hashHistory 

hashHistory utilise des hachages d'URL, ainsi qu'une clé de requête pour suivre l'état de . hashHistory ne nécessite aucune configuration de serveur supplémentaire, mais il est généralement moins préféré que browserHistory.

4
Aaleks

Cela ne fait peut-être pas référence à l'exemple ci-dessus mais j'ai eu la même erreur. Après beaucoup de débogage, j'ai compris que l'historique n'était pas accessible à mes composants internes. Assurez-vous que votre histoire est accessible.

//main.js

<BrowserRouter>
    <div>
        <Route path="/" component={Home}/>
        <Route path="/techMap" component={TechMap}/>
    </div>
 </BrowserRouter>

//app.js

<div>
   <TechStack history= {this.props.history}/>
</div>

//techstack.js

<div>
    <span onClick={this.search.bind(this)}>
    </span>
 </div>
)

search(e){
 this.props.history.Push('/some_url');
}

TechStack est mon composant interne. 

Un peu plus tôt, j’ai pu obtenir l’histoire dans app.js mais pas dans tech.js. Mais après avoir passé des accessoires sous forme d’histoire, j’ai eu l’histoire dans tech.js et les travaux de routage

3
Prayag

J'utilise browserHistory au lieu de HashHistory. Il me suffit ensuite de procéder comme suit:

import { browserHistory } from 'react-router'
// ...
// ...

   navigate(){
        browserHistory.Push('/');
    }
1
hellogoodnight

Vous n'avez plus besoin d'utiliser browserHistory. React-router-dom injecte dans les accessoires et le contexte associés à votre route de composant. L'un de ces accessoires est 'history' et cet objet d'historique est un fonction Indiquez que vous pouvez appeler et suivre l'itinéraire vers lequel vous souhaitez naviguer.

par exemple, dans un composant de base de classe, vous pouvez créer une fonction comme ci-dessous en tant que gestionnaire onClick pour la redirection vers un lien spécifique.

redirectToPage() {
 this.props.history.Push('/page'); OR
 this.context.router.history.Push('/page');
}

tandis que dans un composant sans état de base de fonction

redirectToSessionStatePage() {
 props.history.Push('/page');OR
 context.router.history.Push('/page');
}
1
Odeyinka Olubunmi

Changez votre composant Layout pour que la navigation soit assignée à ES6 lambda. Cela est nécessaire pour définir la valeur correcte de cette

import React from "react";
import {Link, Router, Route, hashHistory} from "react-router";
export default class Layout extends React.Component{
    navigate = () => {
        this.context.router.Push('/');
    }

    render(){ 
      return(
        <div>
            {this.props.children}
            <button onClick={this.navigate.bind(this)}>feature</button>
        </div>
      )
    }
}
0
Aditya Singh

Avec React router v4, vous devez intégrer les composants à withRouter. Ensuite, vous pouvez accéder à l'historique dans vos composants. Faites ce qui suit:

import { withRouter } from 'react-router-dom';
...
...
export default withRouter(MyComponent);
0
Vishal Gulati

Il semble que vous ayez écrasé votre importation de fonctionnalités avec tout ce qui se trouve dans votre répertoire/archives. Dans le code que vous avez posté, vous avez ceci:

import Features from "./page/Features";
import Features from "./page/archive";
0
doubledherin