web-dev-qa-db-fra.com

Réagir le routeur - historique non défini

J'essaie d'utiliser le 1.0.0-rc1 react-router et l'historique 2.0.0-rc1 pour naviguer manuellement sur le site Web après avoir appuyé sur le bouton. Malheureusement, après avoir appuyé sur le bouton, je reçois:

Impossible de lire la propriété 'pushState' de non définie

Mon code de routeur:

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 tente de naviguer vers 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'historique avec this.props.history, tout fonctionne bien. Quel est le problème avec ce code?

MODIFIER.

Après avoir ajouté 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 historique = {historique}), je venais juste d'accéder à localhost:8080/testapp et tout fonctionnait correctement - mes ressources statiques sont générées dans le répertoire dist/testapp. Maintenant, sous cette URL, je reçois:

L'emplacement "/ testapp /" ne correspond à aucune ressource

J'ai essayé d'utiliser la fonction useBasename de la manière 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 de retour, mais encore une fois je reçois l'erreur

Impossible de lire la propriété 'pushState' de non définie

dans l'appel:

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

Je pense que c'est peut-être à cause de ma tâche de connexion dans gulp. J'ai donc ajouté history-api-fallback à la configuration:

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

Mais après avoir ajouté un middleware, tout ce que je reçois après avoir accédé à un site Web est:

Ne peut pas obtenir /

javascriptreactjsecmascript-6react-router
5
Niemand

À partir de "react-router": "^ 4.1.1" , vous pouvez essayer les solutions suivantes:

Utilisez ' this.props.history.Push ('/new-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, Route et Switch de 'react-router-dom'.

Donc, chaque fois que vous ajoutez un composant dans le routeur React 'Route', c'est-à-dire,

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

.. alors 'React Router' ajoutera une nouvelle propriété nommée 'history' à ce composant (LoginScreen, dans ce cas). Vous pouvez utiliser cet accessoire d’historique pour naviguer par programmation vers d’autres répertoires.

Alors maintenant, dans le composant LoginScreen, 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
}
2
Santosh Pillai

Parce que tout change comme l'enfer dans le monde, voici une version qui a fonctionné pour moi en 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
2
holms

Pour créer l'historique du navigateur, vous devez maintenant le créer à partir du paquetage History, comme vous l'avez déjà essayé.

import createBrowserHistory from 'history/lib/createBrowserHistory';

puis passez-le au routeur comme si

<Router history={createBrowserHistory()}>
    <Route />
</Router>

Les docs expliquent cela parfaitement

1
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>
          )}
}
0
s.chandran sha