web-dev-qa-db-fra.com

Historique du routeur avec react-routeur 4.0.0

Dans react-router 4.0.0, la création d'historique semble avoir changé, avec le index.js suivant

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory } from 'react-router';
import App from './components/App';
import './index.css';

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={App} />
  </Router>, document.getElementById('root')
);

Je reçois:

Warning: Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`.

et une erreur après. J'ai parcouru le code, mais je ne trouve aucun exemple ni aucune API pour savoir comment cela a changé.

javascriptreactjsreact-router
4
Mahoni

React Router v4 a légèrement changé les choses. Ils ont fabriqué des éléments de routeur de premier niveau séparés. Remplacez <Router history={hashHistory}> par <HashRouter> dans votre code.

J'espère que cela aidera pleinement.

import {HashRouter,Route} from 'react-router-dom';

<HashRouter>
    <Route path = "/getapp" component = {MainApp} />
</HashRouter>
20
Anshul Jain

hashHistory n'est plus un objet exporté de react-router. Si vous souhaitez utiliser un historique de hachage, vous pouvez simplement générer un <HashRouter>.

import { HashRouter } from 'react-router-dom'

ReactDOM.render((
  <HashRouter>
    <App />
  </HashRouter>
), holder)
8
Paul S

C’est un sujet dans lequel la documentation RR devrait apporter plus de clarté… Pour répondre à votre question, vous pouvez utiliser un BrowserRouter , ou un routeur et lui transmettre un history instance.

Optez pour la première approche lorsque tous vos changements d’itinéraire se font par l’intermédiaire des composants Link.

Toutefois, lorsque vous devez modifier les itinéraires à partir de vos méthodes de magasin, vous devez utiliser la dernière approche. Vous pouvez écrire un module qui crée et exporte un objet d'historique, puis utilisez le même objet dans votre composant Routeur et dans les méthodes de stockage. Il est important d'utiliser le même objet, sinon le routeur ne pourra pas synchroniser correctement les modifications d'URL avec votre magasin.

0
hazardous