Cho dù bạn đang tạo ứng dụng một trang hay cửa hàng thương mại điện tử, thường có trường hợp bạn cần lấy URL của trang hiện tại. May mắn thay, điều này rất dễ thực hiện trong React
Để lấy URL hiện tại trong React, bạn có thể
- sử dụng cửa sổ. vị trí đối tượng JavaScript
- Sử dụng hook useLocation từ thư viện Reac-router-dom
Bài viết này sẽ phân tích cả hai giải pháp và hiển thị các ví dụ cho từng giải pháp
Bắt đầu nào 😎
Trong JavaScript, cửa sổ. đối tượng vị trí giúp nhà phát triển thao tác với URL hiện tại của trang
Nó trả về nhiều thuộc tính. Dưới đây là một số trong số họ
- The href - Trả về URL của trang hiện tại
- Giao thức - Trả về giao thức của trang hiện tại [HTTP, HTTPS]
- Tên máy chủ - Trả về tên miền của trang hiện tại
- Tên đường dẫn - Trả về đường dẫn của trang hiện tại
- Cổng - Trả về cổng của trang hiện tại
Hãy phân tích cách đối tượng này hoạt động với trang hiện tại của blog này
javascript
Bạn cũng có thể sử dụng đối tượng này để lấy URL hiện tại bên trong ứng dụng web React
Đây là một ví dụ mã về cách thực hiện nó
javascriptimport React from "react";
import { createRoot } from "react-dom/client";
const App = [] => {
const href = window.location.href;
return {href}
;
};
const rootElement = document.getElementById["root"];
const root = createRoot[rootElement];
root.render[];Ví dụ này xuất URL hiện tại bên trong phần tử div
Nếu bạn đang tạo một ứng dụng một trang, rất có thể bạn đang sử dụng react-router-domlibrary
Thư viện này là một gói nhẹ bổ sung định tuyến cho ứng dụng React của bạn
Khi sử dụng thư viện này, bạn có thể sử dụng hook useLocation để truy cập URL hiện tại thay vì sử dụng cửa sổ JavaScript. đối tượng vị trí
Trong Javascript, đôi khi cần lấy URL của trang web hiện tại mà bạn đang truy cập. Có một số cách để làm điều này
Cách lấy URL hiện tại bằng Javascript
Nếu chúng tôi muốn lấy URL đầy đủ của trang web hiện tại, chúng tôi chỉ cần sử dụng window.location.href
// Shows us the current URL
let currentUrl = window.location.href;
Cách lấy URL tên miền hiện tại bằng Javascript
Nếu bạn chỉ muốn lấy tên miền hiện tại, không bao gồm bất kỳ trang nào, bạn có thể chạy phần sau trong Javascript
let currentDomain = window.location.origin;
Chẳng hạn, nếu bạn đang sử dụng https. //Google. com/page/search/go/, ở trên sẽ chỉ trả về https. //Google. com
Cách lấy đường dẫn sau tên miền bằng Javascript
Nếu bạn chỉ muốn lấy đường dẫn sau tên miền, hãy chạy như sau
let currentPath = window.location.pathname;
Mặc dù đây là những cách sử dụng phổ biến nhất cho
javascriptimport React from "react";
import { createRoot } from "react-dom/client";
const App = [] => {
const href = window.location.href;
return {href}
;
};
const rootElement = document.getElementById["root"];
const root = createRoot[rootElement];
root.render[];0, nhưng cũng có một số thuộc tính hữu ích khác, chẳng hạn như cửa sổ. địa điểm. thuộc tính href trả về href [URL] của trang hiện tại. Chúng tôi cũng có thể sử dụng cửa sổ. vị trí hoặc vị trí thay cho cửa sổ. địa điểm. href
Chúng tôi cũng có thể sử dụng tài liệu. tài liệuURI và tài liệu. thuộc tính URL
tài liệu. documentURI trả về vị trí của tài liệu dưới dạng chuỗi
tài liệu. URL trả về URL của tài liệu dưới dạng chuỗi
Hãy hiểu cách lấy URL hiện tại bằng JavaScript bằng cách sử dụng các thuộc tính trên với sự trợ giúp của các ví dụ về chương trình
Ví dụ 1 - Sử dụng cửa sổ. địa điểm. thuộc tính href
Trong ví dụ này, chúng tôi sử dụng cửa sổ. địa điểm. href để lấy URL hiện tại. Trong ví dụ dưới đây, bạn có thể thử sử dụng cửa sổ. vị trí hoặc vị trí thay cho cửa sổ. địa điểm. href
đầu ra
Chúng tôi thực thi mã trực tuyến. Khi bạn chạy đoạn mã trên, một thông báo cảnh báo hiển thị URL hiện tại của trang được hiển thị. Ngoài ra, trình duyệt sẽ hiển thị URL hiện tại của trang
URL is //tpcg1.tutorialspoint.com/root/84804/index.htm?v=1
URL trên là địa chỉ vị trí của hello. tệp html. Tùy thuộc vào nơi bạn đã lưu lời chào của mình. html, bạn có thể nhận được một URL khác. Bạn cũng có thể nhận được một loại URL khác khi chạy chương trình cục bộ
Khi bạn chạy chương trình cục bộ, bạn có thể nhận được URL hiện tại tương tự như bên dưới -
URL is file:///D:/JavaScript/index.html
Tôi đã lưu chỉ mục. html trong thư mục D. /JavaScript
Ví dụ 2 - Sử dụng tài liệu. tài liệuURI
Trong ví dụ này, chúng tôi sử dụng tài liệu. documentURI để lấy URL hiện tại của tài liệu
đầu ra
Chúng tôi thực thi mã trực tuyến. Khi bạn thực thi đoạn mã trên, một thông báo cảnh báo hiển thị URL hiện tại của tài liệu. Và trình duyệt cũng sẽ hiển thị URL hiện tại