Как получить текущий 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.

2.65 GEEK