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.
Dans react-router 2 et 3, votre code de configuration de route ressemblera à ceci:
import { browserHistory } from 'react-router' ReactDOM.render (( ... ), document.body);
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
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 🙂