В React.js, как я могу изменить заголовок страницы в соответствии с URL в app.js

#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. Спасибо вам за ваше мнение. Надеюсь, у вас будет хороший день!