reactjs - ne peut pas lire de bien pousser undefined

J'ai ce code. Ce que je veux faire, c'est quand je clique sur un bouton, la fonction' il va me prendre pour indice de route. Cependant, Réagir arrête pas de dire "ne peut pas lire de propriété pousser de l'indéfini" Ce que j'ai fait de mal?

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

Disposition composant

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

paquet.json partielle

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

-------------mise à jour de la jordanie répondre-------------

Espérons que cela peut vous aider github.com/reactjs/react-router/issues/975
l'histoire n'est pas accessible à Disposition de composants, le passer, comme <Route path="/"={Présentation} histoire={hashHistory}>

OriginalL'auteur angry kiwi | 2016-04-07

10

À Réagir Routeur v4, vous n'avez plus à donner une histoire à votre routeur. Au lieu de cela il vous suffit d'utiliser BrowserRouter ou HashRouter de "réagir-routeur-dom'. Mais que fait on ne sait pas exactement comment pousser une déroute à votre histoire, vous n'êtes pas réagir composant.

La solution est d'utiliser la l'histoire paquet.

Il suffit d'importer createHistory comme ceci:
```
import createHistory from 'history/createBrowserHistory'
```
Ou la façon dont je le fais, c'est comme ceci:
```
import { createHashHistory } from 'history'
```
puis de créer votre histoire
```
export const history = createHashHistory()
```
et maintenant, vous pouvez pousser:
```
history.push('/page')
```
J'espère que cela aide les autres qui viennent à cette question. Aucun des actuels des réponses m'a donné ce dont j'avais besoin.

Comment puis-je avoir l'actualisation de la page lorsque je la pousse?

OriginalL'auteur Wylliam Judd
5

Cela peut ne pas se référer à l'exemple ci-dessus, mais j'ai eu la même erreur. Après beaucoup de débogage, j'ai compris que l'histoire n'est pas accessible à mon composantes 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 intérieur du composant.

Plus tôt, j'ai été en mesure d'obtenir dans l'histoire app.js mais pas dans tech.js.
Mais après le passage des accessoires en forme de l'histoire, je l'ai eu dans l'histoire tech.js et les travaux de routage

OriginalL'auteur Prayag
4

Vous avez besoin de changer votre route.js page de
```
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('/');
```
L'réagissent-routeur docs vous encourageons à utiliser browserHistory au lieu de hashHistory

hashHistory utilise l'URL de tables de hachage, avec une requête de la clé pour garder une trace de
état. hashHistory ne nécessite aucune configuration supplémentaire du serveur, mais est
généralement moins privilégiée que browserHistory.

OriginalL'auteur Aaleks

- Je utiliser browserHistory au lieu de HashHistory.
Ensuite, j'ai juste besoin de faire ce qui suit:

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

   navigate(){
        browserHistory.push('/');
    }

OriginalL'auteur hellogoodnight

1

Vous n'avez pas besoin d'utiliser browserHistory plus.
Réagir-routeur-dom injecter dans votre composant liées à l'itinéraire d'accessoires et de contexte.
Un de ces accessoires est "historique" et sur cette histoire de l'objet est une fonction push que vous pouvez appeler et passer la route vers lequel vous souhaitez naviguer.

exemple dans une Classe de composant de base, vous pouvez créer une fonction comme ci-dessous comme un onClick gestionnaire de redirection de lien spécifique
```
redirectToPage() {
 this.props.history.push('/page'); OR
 this.context.router.history.push('/page');
}
```
alors que dans une fonction de base apatrides composant
```
redirectToSessionStatePage() {
 props.history.push('/page');OR
 context.router.history.push('/page');
}
```
OriginalL'auteur Odeyinka Olubunmi

De changer votre configuration composant naviguer attribué à ES6 lambda. Ceci est nécessaire pour définir la valeur correcte de ce

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

lorsque je clique sur la fonctionnalité que j'ai obtenu ne peut pas obtenir la propriété de pousser undefined'

OriginalL'auteur Aditya Singh

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
}

OriginalL'auteur angry kiwi

0

Il semble que vous écrasait les Caractéristiques de votre importation avec tout ce qui est dans votre /archives répertoire. Dans le code que vous avez posté, vous avez ceci:
```
import Features from "./page/Features";
import Features from "./page/archive";
```
OriginalL'auteur doubledherin
0

À Réagir routeur v4, vous avez besoin d'envelopper les composants dans withRouter. Ensuite, vous pouvez accéder à l'historique de vos composants. Procédez de la manière suivante:
```
import { withRouter } from 'react-router-dom';
...
...
export default withRouter(MyComponent);
```
OriginalL'auteur Vishal Gulati

Vous devez vous connecter pour publier un commentaire.