#javascript #reactjs
Вопрос:
Я хочу изменить заголовок страницы, соответствующий URL-адресу в React.js.
Если URL-адрес «localhost:3000/рекомендация/загрузка», я хочу показать компонент «LoadingMainHeader» в заголовке.
В противном случае, если URL-адрес не такой, как указано выше, я хочу показать компонент «Главный заголовок» в заголовке.
Мой код, как показано ниже, но он не работает. (отображается только главный заголовок) Пожалуйста, дайте мне знать, как исправить код. Спасибо.
import React from 'react';
import { BrowserRouter, Route, location } from 'react-router-dom';
import Main from './pages/Main';
import Recommendation from './pages/Recommendation';
import Loading from './pages/Loading';
import RandomRecResult from './pages/RandomRecResult';
import SelectedRecResult from './pages/SelectedRecResult';
import MainHeader from './components/common/MainHeader';
import LoadingMainHeader from './components/common/LoadingMainHeader';
function App(location) {
if (location.pathname !== '/recommendation/loading')
return (
<BrowserRouter>
<MainHeader></MainHeader>
<Route exact path="/" component={Main} />
<Route exact path="/recommendation" component={Recommendation}/>
<Route exact path="/recommendation/result_random" component={RandomRecResult}/>
<Route exact path="/recommendation/result_selected" component={SelectedRecResult}/>
</BrowserRouter>
);
else
return (
<BrowserRouter>
<LoadingMainHeader></LoadingMainHeader>
<Route exact path="/recommendation/loading" component={Loading}/>
</BrowserRouter>
);
}
export default App;
Комментарии:
1. лучший подход-создать новый файл заголовка, а затем в этот файл заголовка добавить условие
2. Удалите
location
параметр из своейfunction App(location)
строки, он затеняет тоlocation
, что вы хотите использовать. Или используйтеwindow.location.pathname
вместо этого (лучше всего делать и то, и другое).3. Вот лучший способ, используя переключатель: codesandbox.io/s/winter-meadow-ebgov?file=/src/App.js (ваш механизм сравнения местоположения со строкой и использования блока if else-это, по сути, именно то, что
Switch
делает)4. @ChrisG Вау!! Я решил эту проблему с помощью переключателя. Большое спасибо!!
5. @hu7sy Спасибо вам за ваше мнение!
Ответ №1:
проверьте, что происходит на месте.имя пути с помощью консоли.
или попробуйте реализовать с помощью крючка useLocation.
import React from 'react';
import { BrowserRouter, Route, useLocation } from 'react-router-dom';
import Main from './pages/Main';
import Recommendation from './pages/Recommendation';
import Loading from './pages/Loading';
import RandomRecResult from './pages/RandomRecResult';
import SelectedRecResult from './pages/SelectedRecResult';
import MainHeader from './components/common/MainHeader';
import LoadingMainHeader from './components/common/LoadingMainHeader';
function App() {
let location = useLocation()
if (location.pathname !== '/recommendation/loading')
return (
<BrowserRouter>
<MainHeader></MainHeader>
<Route exact path="/" component={Main} />
<Route exact path="/recommendation" component={Recommendation}/>
<Route exact path="/recommendation/result_random" component={RandomRecResult}/>
<Route exact path="/recommendation/result_selected" component={SelectedRecResult}/>
</BrowserRouter>
);
else
return (
<BrowserRouter>
<LoadingMainHeader></LoadingMainHeader>
<Route exact path="/recommendation/loading" component={Loading}/>
</BrowserRouter>
);
}
export default App;
Комментарии:
1. Спасибо вам за ваш ответ. Но с помощью { useLocation } моя проблема не была решена. Я решил проблему с помощью окна. Расположение. имя пути. Еще раз большое вам спасибо.
Ответ №2:
Вы поступаете неправильно.
Вот решение: демонстрация Codesandbox
Примечание: Это план того, как достичь своей цели.
Счастливого кодирования 🙂
Комментарии:
1. Спасибо вам за ваше мнение. Надеюсь, у вас будет хороший день!