Как получить текущий URL-адрес в React JS

Текущий URL-адрес — это адрес веб-страницы, которую в данный момент просматривает пользователь. Это строка, содержащая протокол, имя хоста, порт и путь к веб-странице.

В этом уроке вы узнаете, как получить текущий URL-адрес в React JS. Мы рассмотрим основы объекта window.locationи способы его использования для получения текущего URL-адреса.

Шаг 1. Создайте новое приложение React.
Шаг 2. Создайте функциональный компонент для отображения URL-адресов.
Шаг 3. Используйте React Router
Шаг 4. Используйте объект window.location
Шаг 5. Протестируйте приложение

Шаг 1. Создайте новое приложение React.

Если вы еще не настроили приложение React, вы можете создать его с помощью Create React App (CRA), популярного инструмента для начальной загрузки проектов React.

Откройте терминал и выполните следующую команду.

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

Шаг 2. Создайте функциональный компонент для отображения URL-адресов.

На этом этапе мы создадим функциональный компонент, который будет отображать текущий URL-адрес на экране. Создайте новый файл UrlDisplay.jsв srcпапке и добавьте следующий код.

import React from 'react';

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

export default UrlDisplay;

Шаг 3. Используйте React Router (необязательно)

Если вы используете React Router для обработки маршрутизации в своем приложении, вы можете получить доступ к текущему URL-адресу, используя перехватчик, useLocationпредоставляемый React Router. Если вы не используете React Router, вы можете пропустить этот шаг.

Установите React Router, выполнив следующую команду.

npm install react-router-dom

Теперь в вашем основном компоненте обычно App.jsимпортируйте и используйте 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;

Шаг 4. Используйте объект window.location (без React Router)

Если вы не используете React Router и хотите напрямую получить доступ к текущему URL-адресу, вы можете использовать window.locationобъект.

Обновите свой App.jsфайл (или любой соответствующий компонент), включив в него следующий код.

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;

Свойство window.location.href возвращает строку, содержащую полный URL-адрес страницы.

window.location содержит другие свойства, которые предоставляют дополнительную информацию об URL-адресе. Некоторые из них:

pathname: путь URL-адреса после имени домена и любого дополнительного номера порта.
protocol: схема протокола URL.
hostname: часть имени хоста URL-адреса.

Например:

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>
  );
}

Шаг 5. Протестируйте приложение

Теперь вы можете запустить сервер разработки для тестирования приложения.

npm start

Теперь ваше приложение React должно отображать текущий URL-адрес на экране либо с помощью React Router, либо непосредственно через объект window.location.

Как получить текущий URL-адрес в React JS

Оглавление