/#/React-router kullanırken tarayıcının adres çubuğunda gösterilmesini engellemenin herhangi bir yolu var mı? Bu ReactJS ile. Örneğin, yeni bir rota gösterisine gitmek için bağlantılara tıklamak localhost:3000/#/veya localhost:3000/#/about. Rotaya bağlı olarak.

React-router'ın 1, 2 ve 3 sürümleri için, URL eşleme şemasına giden yolu ayarlamanın doğru yolu, historyparametresine bir geçmiş uygulaması geçirmektir <Router>. Gönderen geçmişleri belgeler :

Özetle, bir geçmiş, değişiklikler için tarayıcının adres çubuğunun nasıl dinleneceğini bilir ve URL'yi yönlendiricinin yolları eşleştirmek ve doğru bileşen kümesini oluşturmak için kullanabileceği bir konum nesnesine ayrıştırır.

Sürüm 2 ve 3

React-router 2 ve 3'te, rota yapılandırma kodunuz aşağıdaki gibi görünecektir:

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

Versiyon 1

1.x sürümünde, bunun yerine aşağıdakileri kullanacaksınız:

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

Kaynak: Sürüm 2.0 Yükseltme Kılavuzu

Sürüm 4

React-router'ın yaklaşan 4. sürümü için sözdizimi büyük ölçüde değişti BrowserRouterve yönlendirici kök etiketi olarak kullanılması gerekiyor .

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

Kaynak React Router Sürüm 4 Belgeleri

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

Geçerli sürüm 0.11 ve sonrası için eklemeniz Router.HistoryLocationgerekir Router.run(). <Routes>artık kullanımdan kaldırıldı. 0.12.x HistoryLocation uygulaması için Yükseltme Kılavuzuna bakın .

IE8'i desteklemeniz gerekmiyorsa, Tarayıcı Geçmişini kullanabilirsiniz ve react-router window.pushState, hash'i ayarlamak yerine kullanacaktır .

Bunun tam olarak nasıl yapılacağı, kullanmakta olduğunuz React Router sürümüne bağlıdır:

• 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

Bunu gerçekleştirmek için aslında .htaccess'i kullanabilirsiniz. Tarayıcı normalde sorgu dizesi sınırlayıcı ihtiyacı ?veya #sorgu dizesi başlar ve dizin yolları sona yeri belirlemek için. İstediğimiz sonuç şu: www.mysite.com/dir Bu nedenle, web sunucusu istediğimizi düşündüğü dizini aramadan önce sorunu yakalamamız gerekiyor /dir. Bu yüzden .htaccessprojenin köküne bir dosya yerleştiriyoruz .

    # 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

Ardından window.location.pathname ile sorgu parametrelerini elde edersiniz.

Daha sonra, isterseniz tepki yollarını kullanmaktan kaçınabilir ve isterseniz url'yi ve tarayıcı geçmişini de değiştirebilirsiniz. Umarım bu birine yardımcı olur ...

Geçmiş paketini yükleyin

npm install history --save

Daha sonra, createHistory ve useBasename geçmişini içe aktarın

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

uygulamanızın url'si www.example.com/myApp ise, / root / myApp olmalıdır.

geçmiş değişkenini Yönlendiriciye aktarın

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

Şimdi tüm Bağlantı etiketleriniz için tüm yolların önüne bir "/" ekleyin.

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

Çözümün ilham kaynağı React-Router Örneğinden geldi ve bu maalesef API'lerinde düzgün şekilde belgelenmemişti.

Hash'ten sonra neyin gösterileceğini işlemenin bir başka yolu (bu yüzden pushState'i kullanmıyorsanız!), CustomLocation'ınızı oluşturmak ve ReactRouter oluştururken yüklemektir.

Örneğin, taramaya ilişkin google spesifikasyonlarına uymak için hashbang url'sine (yani #! İle) sahip olmak istiyorsanız, esas olarak orijinal HashLocation'ı kopyalayan bir HashbangLocation.js dosyası oluşturabilirsiniz:

'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;

Not slashToHashbang fonksiyonunu.

O zaman yapmalısın

ReactRouter.create({location: HashbangLocation})

Ve bu kadar :-)