Réagir routeur défini histoire

Je suis en train d'utiliser la version 1.0.0-rc1 réagir-routeur et l'histoire 2.0.0-rc1 pour naviguer manuellement via le site web après avoir appuyé sur le bouton. Malheureusement, après avoir appuyé sur le bouton j'obtiens:

Impossible de lire la propriété 'pushState' undefined

Mon routeur code:

import React from 'react';
import { Router, Route, Link, browserHistory } from 'react-router'
import AppContainer from './components/AppContainer.jsx';
import MyTab from './components/test/MyTab.jsx';
import MainTab from './components/test/MainTab.jsx';


var routes = (
    <Route component={AppContainer} >
        <Route name="maintab" path="/" component={MainTab} />
        <Route name="mytab" path="/mytab" component={MyTab} />
    </Route>
);

React.render(<Router history={browserHistory}>{routes}</Router>, document.getElementById('main'));

Le bouton de navigation est sur MyTab et il tente de naviguer à MainTab:

import React from 'react';
import 'datejs';
import History from "history";
export default React.createClass({

    mixins: [ History ],

    onChange(state) {
        this.setState(state);
    },

    handleClick() {
        this.history.pushState(null, `/`)
    },

    render() {
        return (
            <div className='container-fluid' >
                <button type="button" onClick={this.handleClick.bind(this)}>TEST</button>
            </div>

        );
    }
});

Lorsque j'utilise l'histoire avec this.props.history tout fonctionne bien. Quel est le problème avec ce code?

MODIFIER.

Après adjonction de ce qui suit:

const history = createBrowserHistory();

React.render(<Router history={history}>{routes}</Router>, document.getElementById('main'));

J'essaie d'accéder à mon application. Avant (sans histoire={histoire}), j'ai juste consulté localhost:8080/testapp et tout a bien fonctionné - mes ressources statiques sont générés dans dist/testapp répertoire. Maintenant, en vertu de la présente URL-je obtenir:

Emplacement "/testapp/" ne correspondent à aucune des ressources

J'ai essayé d'utiliser le useBasename fonction de façon suivante:

    import { useBasename } from 'history'
    const history = useBasename(createBrowserHistory)({
    basename: '/testapp'
});

React.render(<Router history={history}>{routes}</Router>, document.getElementById('main'));

et l'application est en arrière, mais encore une fois je reçois le message d'erreur

Impossible de lire la propriété 'pushState' undefined

à l'appel:

handleClick() {
    this.history.pushState(null, `/mytab`)
},

Je envisages-il peut-être à cause de mon connecter tâche dans gorgée, j'ai donc ajouté de l'histoire de l'api de la reprise de configuration:

settings: {
      root: './dist/',
      host: 'localhost',
      port: 8080,
      livereload: {
        port: 35929
      },
      middleware: function(connect, opt){
        return [historyApiFallback({})];
      }
    }

Mais après l'ajout du middleware tout ce que j'obtiens après avoir accédé à un site web est:

Ne peut pas OBTENIR /

OriginalL'auteur Niemand | 2016-01-04

De "réagir " routeur": "^4.1.1", vous pouvez essayer ce qui suit:

Utiliser'.accessoires de jeu.l'histoire.push('/nouvelle-route")'. Voici un exemple détaillé

1: Index.js

 import { BrowserRouter, Route, Switch } from 'react-router-dom'; 
 //more imports here
    ReactDOM.render(
      <div>
        <BrowserRouter>
           <Switch>
              <Route path='/login' component={LoginScreen} />
              <Route path='/' component={WelcomeScreen} />
           </Switch>
        </BrowserRouter>
     </div>, document.querySelector('.container'));

Ci-dessus, nous avons utilisé BrowserRouter, Itinéraire et passer de 'réagir-routeur-dom'.

Donc à chaque fois que vous ajoutez un composant dans la Réagir Routeur "Route", qui est,

<Route path='/login' component={LoginScreen} />

..puis "Réagir Routeur va ajouter une nouvelle propriété nommée "historique" pour ce composant (LoginScreen, dans ce cas). Vous pouvez utiliser cette histoire prop pour en programmant naviguer vers d'autres rountes.

Donc maintenant dans le LoginScreen composant, vous pouvez naviguer comme ceci:

2: LoginScreen:

return (
      <div>
       <h1> Login </h1>
       <form onSubmit={this.formSubmit.bind(this)} >
         //your form here
       </form>
      </div>

    );



formSubmit(values) {
 //some form handling action
   this.props.history.push('/'); //navigating to Welcome Screen
}

OriginalL'auteur Santosh Pillai

Parce que tout change comme l'enfer dans réagissent monde voici une version qui a fonctionné pour moi à décembre 2016:

import React from 'react'
import { Router, ReactRouter, Route, IndexRoute, browserHistory } from 'react-router';

var Main = require('../components/Main');
var Home = require('../components/Home');
var Dialogs = require('../components/Dialogs');

var routes = (
    <Router history={browserHistory}>
        <Route path='/' component={Main}>
            <IndexRoute component={Home} />
            <Route path='/dialogs' component={Dialogs} />
        </Route>
    </Router>
);

module.exports = routes

OriginalL'auteur holms

1

Pour créer l'historique du navigateur, vous devez maintenant créer à partir de la History paquet comme vous l'avez essayé.
```
import createBrowserHistory from 'history/lib/createBrowserHistory';
```
et ensuite de le passer au Routeur comme
```
<Router history={createBrowserHistory()}>
    <Route />
</Router>
```
La docs expliquer parfaitement

Veuillez ajouter ces autres histoire types createHashHistory, createBrowserHistory,createMemoryHistory
Non, ils ne sont pas pertinents pour la réponse.
J'ai essayé ta suggestion et de la mise à jour de la question. Pourriez-vous jeter un oeil?
il ne fonctionne pas
Ils ont probablement changé depuis un an. 🙂

OriginalL'auteur Henrik Andersson

 import React, { Component} from 'react';
 import { Link } from 'react-router-dom';
 class Login extends Component {
 constructor(props){
 super(props)
 }
 handleClick(event){
  this.props.history.push('/dashboard')
}
 render() {
  return (
         <Button color="primary" className="px-4"  onClick={this.handleClick.bind(this)}>Login</Button>
          )}
}

OriginalL'auteur s.chandran sha

Vous devez vous connecter pour publier un commentaire.