Có cách nào để ngăn không /#/cho hiển thị trên thanh địa chỉ của trình duyệt khi sử dụng bộ định tuyến phản ứng không? Đó là với ReactJS. tức là Nhấp vào liên kết để đi đến một tuyến đường mới cho thấy localhost:3000/#/hoặc localhost:3000/#/about. Tùy thuộc vào tuyến đường.

Đối với các phiên bản 1, 2 và 3 của react-router, cách chính xác để đặt đường dẫn đến lược đồ ánh xạ URL là chuyển một triển khai lịch sử vào historytham số của <Router>. Từ tài liệu lịch sử :

Tóm lại, lịch sử biết cách lắng nghe thanh địa chỉ của trình duyệt để biết các thay đổi và phân tích cú pháp URL thành một đối tượng vị trí mà bộ định tuyến có thể sử dụng để khớp các tuyến và hiển thị đúng tập hợp các thành phần.

Phiên bản 2 và 3

Trong react-router 2 và 3, mã cấu hình tuyến đường của bạn sẽ giống như sau:

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

Phiên bản 1

Trong phiên bản 1.x, thay vào đó bạn sẽ sử dụng những thứ sau:

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

Nguồn: Hướng dẫn nâng cấp phiên bản 2.0

Phiên bản 4

Đối với phiên bản 4 sắp tới của react-router, cú pháp đã thay đổi rất nhiều và nó bắt buộc phải sử dụng BrowserRouterlàm thẻ gốc của router.

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

Nguồn React Router Version 4 Docs

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

Đối với phiên bản hiện tại 0.11 trở đi, bạn cần thêm Router.HistoryLocationvào Router.run().<Routes>hiện không được dùng nữa. Xem Hướng dẫn nâng cấp để triển khai HistoryLocation 0.12.x.

Nếu bạn không cần hỗ trợ IE8, bạn có thể sử dụng Lịch sử trình duyệt và bộ định tuyến phản ứng sẽ sử dụng window.pushStatethay vì đặt băm.

Cách thực hiện chính xác tùy thuộc vào phiên bản React Router mà bạn đang sử dụng:

• 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

Bạn thực sự có thể sử dụng .htaccess để thực hiện điều này. Trình duyệt thường cần dấu phân cách chuỗi truy vấn ?hoặc #để xác định nơi bắt đầu chuỗi truy vấn và kết thúc đường dẫn thư mục. Kết quả cuối cùng chúng tôi muốn là www.mysite.com/dir Vì vậy, chúng tôi cần nắm bắt vấn đề trước khi máy chủ web tìm kiếm thư mục mà nó cho rằng chúng tôi đã yêu cầu /dir. Vì vậy, chúng tôi đặt một .htaccesstệp trong thư mục gốc của dự án.

    # 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

Sau đó, bạn nhận được các tham số truy vấn với window.location.pathname

Sau đó, bạn có thể tránh sử dụng các tuyến phản ứng nếu bạn muốn và chỉ cần thao tác url và lịch sử trình duyệt nếu bạn muốn. Hy vọng điều này sẽ giúp ai đó ...

Cài đặt gói lịch sử

npm install history --save

Tiếp theo nhập createHistory và useBasename từ lịch sử

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

nếu url ứng dụng của bạn là www.example.com/myApp thì / root phải là / myApp.

chuyển biến lịch sử cho Bộ định tuyến

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

Bây giờ, đối với tất cả các thẻ Liên kết của bạn, hãy thêm dấu "/" vào trước tất cả các đường dẫn.

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

Nguồn cảm hứng của giải pháp đến từ Ví dụ về React-Router , nhưng thật không may, nó không được ghi lại đúng cách trong API của họ.

Một cách khác để xử lý những gì sẽ hiển thị sau khi băm (vì vậy nếu bạn không sử dụng pushState!) Là tạo CustomLocation của bạn và tải nó khi tạo ReactRouter.

Đối với ví dụ điển hình, nếu bạn muốn có url hashbang (tương tự với #!) Để tuân thủ các thông số kỹ thuật của google để thu thập thông tin, bạn có thể tạo tệp HashbangLocation.js chủ yếu sao chép HashLocation ban đầu như:

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

Lưu ý đến hàm SlashToHashbang .

Sau đó, bạn biện minh phải làm

ReactRouter.create({location: HashbangLocation})

Và thế là xong :-)