Qualche modo per impedire che venga /#/visualizzato nella barra degli indirizzi del browser quando si utilizza React-Router? Questo è con ReactJS. Ad esempio, facendo clic sui collegamenti per passare a un nuovo percorso viene visualizzato localhost:3000/#/o localhost:3000/#/about. A seconda del percorso.

Per le versioni 1, 2 e 3 di react-router, il modo corretto per impostare il percorso sullo schema di mappatura URL è passare un'implementazione della cronologia nel historyparametro di <Router>. Dalla documentazione delle storie :

In poche parole, una cronologia sa come ascoltare la barra degli indirizzi del browser per le modifiche e analizza l'URL in un oggetto posizione che il router può utilizzare per abbinare le rotte e rendere l'insieme corretto di componenti.

Versioni 2 e 3

In react-router 2 e 3, il codice di configurazione del percorso sarà simile a questo:

import { browserHistory } from 'react-router'
ReactDOM.render (( 
 <Router history={browserHistory} >
   ...
 </Router> 
), document.body);

Versione 1

Nella versione 1.x, utilizzerai invece quanto segue:

import createBrowserHistory from 'history/lib/createBrowserHistory'
ReactDOM.render (( 
  <Router history={createBrowserHistory()} >
   ...
  </Router> 
), document.body);

Fonte: Guida all'aggiornamento alla versione 2.0

Versione 4

Per la prossima versione 4 di react-router, la sintassi è cambiata molto ed è necessario utilizzarla BrowserRoutercome tag root del router.

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

Fonte Reagire Router versione 4 Documenti

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

Per la versione corrente 0.11 e successive, è necessario aggiungere Router.HistoryLocationa Router.run(). <Routes>sono ora deprecati. Vedere la Guida all'aggiornamento per l'implementazione di HistoryLocation 0.12.x.

Se non è necessario supportare IE8, è possibile utilizzare la cronologia del browser e la reazione-router utilizzerà window.pushStateinvece di impostare l'hash.

Come farlo esattamente dipende dalla versione di React Router che stai utilizzando:

• v4: https://reacttraining.com/react-router/web/api/BrowserRouter
• v3: https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md
• v2: https://github.com/ReactTraining/react-router/blob/v2.0.0/docs/guides/Histories.md
• v1: https://github.com/ReactTraining/react-router/blob/1.0.x/docs/guides/basics/Histories.md

Puoi effettivamente usare .htaccess per farlo. Il browser normalmente necessita del delimitatore della stringa di query ?o #per determinare dove inizia la stringa di query e dove finiscono i percorsi della directory. Il risultato finale che vogliamo è www.mysite.com/dir Quindi dobbiamo individuare il problema prima che il server web cerchi la directory che pensa di aver richiesto /dir. Quindi mettiamo un .htaccessfile nella radice del progetto.

    # 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

Quindi ottieni i parametri della query con window.location.pathname

Puoi quindi evitare di utilizzare i percorsi di reazione se lo desideri e manipolare anche l'URL e la cronologia del browser se lo desideri. Spero che questo aiuti qualcuno ...

Installa il pacchetto della cronologia

npm install history --save

Quindi importa createHistory e useBasename dalla cronologia

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

se l'URL della tua app è www.example.com/myApp, / root dovrebbe essere / myApp.

passare la variabile della cronologia al router

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

Ora per tutti i tuoi tag Link aggiungi una "/" davanti a tutti i percorsi.

<Link to="/somewhere">somewhere</Link>

L'ispirazione della soluzione è venuta da React-Router che, sfortunatamente, non è stato adeguatamente documentato nella loro API.

Un altro modo per gestire cosa visualizzare dopo l'hash (quindi se non usi pushState!) È creare il tuo CustomLocation e caricarlo durante la creazione di ReactRouter.

Ad esempio, se desideri che l'URL hashbang (quindi con #!) Sia conforme alle specifiche di Google per la scansione, puoi creare un file HashbangLocation.js che copia principalmente l'HashLocation originale come:

'use strict';

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] || ''));
  },

  toString: function toString() {
    return '<HashbangLocation>';
  }

};

module.exports = HashbangLocation;

Nota la funzione slashToHashbang .

Allora devi solo fare

ReactRouter.create({location: HashbangLocation})

Ed è tutto :-)