Текущий URL-адрес — это адрес веб-страницы, которую в данный момент просматривает пользователь. Это строка, содержащая протокол, имя хоста, порт и путь к веб-странице.
В этом уроке вы узнаете, как получить текущий URL-адрес в React JS. Мы рассмотрим основы объекта window.locationи способы его использования для получения текущего URL-адреса.
Шаг 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-адресе. Некоторые из них:
Например:
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.