Morioh
Login
CODE VN

CODE VN

10 months ago

Cách lấy URL hiện tại trong React JS

URL hiện tại là địa chỉ của trang web mà người dùng hiện đang xem. Đó là một chuỗi chứa giao thức, tên máy chủ, cổng và tên đường dẫn của trang web.

Trong hướng dẫn này, bạn sẽ tìm hiểu cách lấy URL hiện tại trong React JS. Chúng tôi sẽ đề cập đến những điều cơ bản về window.locationđối tượng và cách sử dụng nó để lấy URL hiện tại.

Mục lục

  • Bước 1: Tạo ứng dụng React mới
  • Bước 2: Tạo thành phần chức năng để hiển thị URL
  • Bước 3: Sử dụng Bộ định tuyến React
  • Bước 4: Sử dụng đối tượng window.location
  • Bước 5: Kiểm tra ứng dụng

Bước 1: Tạo ứng dụng React mới

Nếu chưa thiết lập ứng dụng React, bạn có thể tạo một ứng dụng bằng cách sử dụng Create React App (CRA), một công cụ phổ biến để khởi động các dự án React.

Mở terminal của bạn và chạy lệnh sau.

npx create-react-app current-url-example
cd current-url-example

Bước 2: Tạo thành phần chức năng để hiển thị URL

Trong bước này, chúng ta sẽ tạo một thành phần chức năng sẽ hiển thị URL hiện tại trên màn hình. Tạo một tập tin mới UrlDisplay.jstrong srcthư mục và thêm đoạn mã sau.

import React from 'react';

const UrlDisplay = ({ currentUrl }) => {
  return (
    <div>
      <h1>Current URL:</h1>
      <p>{currentUrl}</p>
    </div>
  );
};

export default UrlDisplay;

Bước 3: Sử dụng React Router (Tùy chọn)

Nếu bạn đang sử dụng React Router để xử lý việc định tuyến trong ứng dụng của mình, bạn có thể truy cập URL hiện tại bằng cách sử dụng hook useLocationdo React Router cung cấp. Nếu bạn không sử dụng React Router, bạn có thể bỏ qua bước này.

Cài đặt React Router bằng cách chạy lệnh sau.

npm install react-router-dom

Bây giờ, trong thành phần chính của bạn, thông thường App.js, hãy nhập và sử dụng React Router.

import React from 'react';
import { BrowserRouter as Router, Route, Switch, useLocation } from 'react-router-dom';
import UrlDisplay from './UrlDisplay';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={HomePage} />
        {/* Add other routes here */}
      </Switch>
    </Router>
  );
};

const HomePage = () => {
  const location = useLocation();
  const currentUrl = location.pathname;

  return (
    <div>
      <h1>Welcome to the Home Page!</h1>
      <UrlDisplay currentUrl={currentUrl} />
    </div>
  );
};

export default App;

Bước 4: Sử dụng đối tượng window.location (Không có React Router)

Nếu bạn không sử dụng React Router và muốn truy cập trực tiếp vào URL hiện tại, bạn có thể sử dụng window.locationđối tượng.

 

Cập nhật App.jstệp của bạn (hoặc bất kỳ thành phần có liên quan nào) để bao gồm mã sau.

import React, { useEffect, useState } from 'react';
import UrlDisplay from './UrlDisplay';

const App = () => {
  const [currentUrl, setCurrentUrl] = useState('');

  useEffect(() => {
    setCurrentUrl(window.location.href);
  }, []);

  return (
    <div>
      <h1>Welcome to the Home Page!</h1>
      <UrlDisplay currentUrl={currentUrl} />
    </div>
  );
};

export default App;

Thuộc  window.location.href tính trả về một chuỗi chứa toàn bộ URL của trang.

window.location chứa các thuộc tính khác cung cấp thêm thông tin về URL. Một số trong số đó là:

  • pathname: đường dẫn của URL sau tên miền và bất kỳ số cổng tùy chọn nào.
  • protocol: sơ đồ giao thức của URL.
  • hostname: phần tên máy chủ của URL.

Ví dụ:

export default function App() {
  const url = window.location.href;
  const pathname = window.location.pathname;
  const protocol = window.location.protocol;
  const hostname = window.location.hostname;

  return (
    <div>
      You are currently accessing <b>{url}</b><br />
      Pathname: <b>{pathname}</b><br />
      Protocol: <b>{protocol}</b><br />
      Hostname: <b>{hostname}</b>
    </div>
  );
}

Bước 5: Kiểm tra ứng dụng

Bây giờ, bạn có thể khởi động máy chủ phát triển của mình để kiểm tra ứng dụng.

npm start

Ứng dụng React của bạn bây giờ sẽ hiển thị URL hiện tại trên màn hình, bằng cách sử dụng React Router hoặc trực tiếp thông qua window.locationđối tượng.

1.05 GEEK