React-Helmet-Async Tills Titles обновляется только после перезагрузки, а не на навигации (Vite + React 19 + React маршруJavascript

Форум по Javascript
Ответить Пред. темаСлед. тема
Anonymous
 React-Helmet-Async Tills Titles обновляется только после перезагрузки, а не на навигации (Vite + React 19 + React маршру

Сообщение Anonymous »

У меня есть приложение React 19, загруженное с Vite и с помощью React Router v6. Я хочу установить заголовок вкладки браузера на страницу, используя React-helmet-async.
обновления только после того, как я перезагружаю страницу, но не когда я перемещаюсь по ссылкам маршрутизатора. < /P>
a. main.jsx

Код: Выделить всё

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { HelmetProvider } from 'react-helmet-async';
import './index.css';
import { UserProvider } from './context/UserContext';

ReactDOM.createRoot(document.getElementById('root')).render(







)
< /code>
b. Маршрутизация приложения  (app.jsx)  
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Login from './pages/Login';
import Index from './pages/Index';
import PasswordReset from './pages/PasswordReset';
import PrivateRoute from './components/PrivateRoute';
// ... all your imports

export default function App() {
return (




{/* ...all your other routes, exactly as you pasted above...  */}



);
}
< /code>
c: пример страницы < /p>
import { useEffect, useState } from 'react';
import Layout from '../../components/Layout';
import LoadingIndicator from '../../components/shared/LoadingIndicator';
import ErrorMessage from '../../components/shared/ErrorMessage';
import axios from 'axios';
import { Helmet } from 'react-helmet-async'; // ← add this

export default function MapSearchLog() {
const [logContent, setLogContent] = useState('');
const [logDate, setLogDate] = useState('');
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
axios
.get('/api/dashboards/mapsearchlog', {
withCredentials: true, // Use cookies/session for auth
})
.then((res) => {
setLogDate(res.data.date || '');
const rawContent = res.data.content || '';
const plainText = rawContent
.replace(/
/gi, '\n')
.replace(/\r/g, '');
setLogContent(plainText);
setError(null);
})
.catch((err) => {
console.error(err);
setError('Failed to load log file');
})
.finally(() => setLoading(false));
}, []);

return (


Map Search Log



Map Search Log File


Date:{' '}
{logDate || new Date().toISOString().split('T')[0].replace(/-/g, '')}

{loading && }
{error && }

{!loading && !error && (

 {
const blob = new Blob([logContent], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `mapsearch_log_${logDate || ''}.txt`;
a.click();
URL.revokeObjectURL(url);
}}
>
Download Log


{logContent}


)}


);
}
выше - какой -то пример кода, который я использовал


Подробнее здесь: https://stackoverflow.com/questions/797 ... ation-vite
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «Javascript»