Comment arrêter / # / dans le navigateur avec react-router?

Un moyen d’empêcher /#/ de s’afficher dans la barre d’adresse du navigateur lors de l’utilisation de react-router? C’est avec ReactJS. En cliquant sur les liens pour accéder à un nouvel itinéraire, localhost:3000/#/ ou localhost:3000/#/about . Selon l’itinéraire

Pour les versions 1, 2 et 3 de react-router, la méthode correcte pour définir le schéma de routage vers URL consiste à transmettre une implémentation d’historique dans le paramètre history de . De la documentation historique :

En un mot, un historique sait comment écouter les modifications dans la barre d’adresse du navigateur et parsing l’URL dans un object de localisation que le routeur peut utiliser pour faire correspondre les routes et rendre l’ensemble de composants correct.

Versions 2 et 3

Dans react-router 2 et 3, votre code de configuration de route ressemblera à ceci:

 import { browserHistory } from 'react-router' ReactDOM.render ((  ...  ), document.body); 

Version 1

Dans la version 1.x, vous utiliserez plutôt ce qui suit:

 import createBrowserHistory from 'history/lib/createBrowserHistory' ReactDOM.render ((  ...  ), document.body); 

Source: Guide de mise à niveau de la version 2.0

Version 4

Pour la prochaine version 4 de react-router, la syntaxe a beaucoup changé et il est nécessaire d’utiliser BrowserRouter comme tag racine du routeur.

 import BrowserRouter from 'react-router/BrowserRouter' ReactDOM.render ((  ...  ), document.body); 

Source React Router Version 4 Docs

 Router.run(routes, Router.HistoryLocation, function (Handler) { React.render(, document.body); }); 

Pour les versions 0.11 et suivantes, vous devez append Router.HistoryLocation à Router.run() . sont maintenant obsolètes. Consultez le Guide de mise à niveau pour l’implémentation 0.12.x HistoryLocation.

Si vous n’avez pas besoin de prendre en charge IE8, vous pouvez utiliser l’historique du navigateur et window.pushState -router utilisera window.pushState au lieu de définir le hachage.

Comment faire exactement cela dépend de la version de React Router que vous utilisez:

Vous pouvez réellement utiliser .htaccess pour y parvenir. Le navigateur a normalement besoin du délimiteur de chaîne de requête ? ou # pour déterminer où la chaîne de requête commence et où les chemins de répertoire se terminent. Le résultat final que nous souhaitons est www.mysite.com/dir Nous devons donc nous www.mysite.com/dir au problème avant que le serveur Web ne recherche le répertoire pour www.mysite.com/dir nous pensons avoir demandé /dir . Nous .htaccess un fichier .htaccess à la racine du projet.

  # Setting up apache options AddDefaultCharset utf-8 Options +FollowSymlinks -MultiViews -Indexes RewriteEngine on # Setting up apache options (Godaddy specific) #DirectoryIndex index.php #RewriteBase / # Defining the rewrite rules RewriteCond %{SCRIPT_FILENAME} !-d RewriteCond %{SCRIPT_FILENAME} !-f RewriteRule ^.*$ ./index.html 

Ensuite, vous obtenez les parameters de la requête avec window.location.pathname

Vous pouvez alors éviter d’utiliser les itinéraires de réaction si vous le souhaitez et simplement manipuler l’URL et l’historique du navigateur si vous le souhaitez également. J’espère que ça aide quelqu’un …

Installer le package d’historique

 npm install history --save 

Importation suivante createHistory et useBasename de l’historique

 import { createHistory, useBasename } from 'history'; ... const history = useBasename(createHistory)({ basename: '/root' }); 

Si l’URL de votre application est http://www.example.com/myApp, alors / root doit être / myApp.

passer la variable d’historique au routeur

 render((  ...  ), document.getElementById('example')); 

Maintenant, pour toutes vos balises Link, ajoutez un “/” devant tous les chemins.

 somewhere 

L’inspiration de la solution est venue de React-Router Example. Malheureusement, elle n’était pas correctement documentée dans son API.

Une autre façon de gérer les éléments à afficher après le hachage (donc, si vous n’utilisez pas pushState!) Consiste à créer votre CustomLocation et à la charger lors de la création de ReactRouter.

Par exemple, si vous souhaitez avoir une URL de hashbang (donc avec #!) Pour respecter les spécifications de Google en matière d’exploration, vous pouvez créer un fichier HashbangLocation.js qui copiera principalement le HashLocation original, tel que:

 'use ssortingct'; var LocationActions = require('../../node_modules/react-router/lib/actions/LocationActions'); var History = require('../../node_modules/react-router/lib/History'); var _listeners = []; var _isListening = false; var _actionType; function notifyChange(type) { if (type === LocationActions.PUSH) History.length += 1; var change = { path: HashbangLocation.getCurrentPath(), type: type }; _listeners.forEach(function (listener) { listener.call(HashbangLocation, change); }); } function slashToHashbang(path) { return "!" + path.replace(/^\//, ''); } function ensureSlash() { var path = HashbangLocation.getCurrentPath(); if (path.charAt(0) === '/') { return true; }HashbangLocation.replace('/' + path); return false; } function onHashChange() { if (ensureSlash()) { // If we don't have an _actionType then all we know is the hash // changed. It was probably caused by the user clicking the Back // button, but may have also been the Forward button or manual // manipulation. So just guess 'pop'. var curActionType = _actionType; _actionType = null; notifyChange(curActionType || LocationActions.POP); } } /** * A Location that uses `window.location.hash`. */ var HashbangLocation = { addChangeListener: function addChangeListener(listener) { _listeners.push(listener); // Do this BEFORE listening for hashchange. ensureSlash(); if (!_isListening) { if (window.addEventListener) { window.addEventListener('hashchange', onHashChange, false); } else { window.attachEvent('onhashchange', onHashChange); } _isListening = true; } }, removeChangeListener: function removeChangeListener(listener) { _listeners = _listeners.filter(function (l) { return l !== listener; }); if (_listeners.length === 0) { if (window.removeEventListener) { window.removeEventListener('hashchange', onHashChange, false); } else { window.removeEvent('onhashchange', onHashChange); } _isListening = false; } }, push: function push(path) { _actionType = LocationActions.PUSH; window.location.hash = slashToHashbang(path); }, replace: function replace(path) { _actionType = LocationActions.REPLACE; window.location.replace(window.location.pathname + window.location.search + '#' + slashToHashbang(path)); }, pop: function pop() { _actionType = LocationActions.POP; History.back(); }, getCurrentPath: function getCurrentPath() { return decodeURI( // We can't use window.location.hash here because it's not // consistent across browsers - Firefox will pre-decode it! "/" + (window.location.href.split('#!')[1] || '')); }, toSsortingng: function toSsortingng() { return ''; } }; module.exports = HashbangLocation; 

Notez la fonction slashToHashbang .

Alors il suffit de faire

 ReactRouter.create({location: HashbangLocation}) 

Et c’est tout 🙂