Javascript 在React.js中，如何根据app.js中的url更改页面标题

我想根据React.js中的url更改页面标题

如果url是“localhost:3000/recommendation/loading”，我想在标题处显示组件“LoadingMainHeader”

否则，如果url和上面的不一样，我想在标题处显示组件“MainHeader”

我的代码如下，但不起作用。仅显示MainHeader 请让我知道如何修复代码。谢谢

从“React”导入React； 从“react router dom”导入{BrowserRouter，Route，location}； 从“./pages/Main”导入Main； 从“./pages/Recommension”导入建议； 从“./pages/Loading”导入加载； 从“./pages/RandomRecResult”导入RandomRecResult； 从“/pages/SelectedRecResult”导入SelectedRecResult； 从“./components/common/MainHeader”导入MainHeader； 从“./components/common/LoadingMainHeader”导入LoadingMainHeader； 功能应用{ 如果location.pathname！='/推荐/加载' 回来 ; 其他的 回来 ; } 导出默认应用程序；

---

使用控制台检查location.pathname中的内容

或 尝试使用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;

你做得不对

以下是解决方案：

注：这是如何实现目标的蓝图

---

愉快编码：

更好的方法是创建新的头文件，然后在该头文件中添加条件，从而从函数Applocation行中删除location参数，它将隐藏您要使用的实际位置。或者使用window.location.pathname，最好同时使用这两种方法。下面是更好的方法，使用Switch：将位置与字符串进行比较并使用if-else块的机制实际上就是Switchdoes@ChrisG哇！我用开关解决了这个问题。非常感谢@谢谢你的意见！谢谢你的回答。但是通过使用{useLocation}，我的问题没有解决。我使用window.location.pathname解决了这个问题。再次，非常感谢。谢谢你的意见。希望你有一个愉快的一天！