如何在react js web应用程序的页面导航上更改材质UI工具栏中的标题？

Question

我有一个功能组件MainToolBar。在导航到其他页面（功能组件）时，我需要更改主工具栏的标题。我怎么能这么做？使用上下文API或Redux或任何其他简单的东西

下面是Main ToolBar的代码。js

 export default function MainToolBar() {
 const classes = useStyles();
      return (
        <div className={classes.root}>
          <AppBar position="static">
    <Toolbar>
    <Typography align="center" variant="h6" className ={classes.title}>
                ERP System
              </Typography>
              <Button color="inherit">Login</Button>
            </Toolbar>
          </AppBar>
        </div>
      );
    }

下面是Thirdparty.js的代码

       function ThirdParty() 
           {
         return (
            <div>
         <label>ThirdParty</label>            
            </div>
        )
    }
       export default ThirdParty
       layout.js
       import {
      BrowserRouter as ReactRouter,
      Switch as ReactSwitch,
      Route as ReactRoute,
    } from "react-router-dom";
    
 import ThirdParty from "./ThirdParty.js";
    
    export default function Layout() {
      return (
        <div>
          <ReactRouter>
            <MainToolBar />
              <ReactSwitch>
              <ReactRoute exact path="/" component={SignInUp}> 
              </ReactRoute>         
              <ReactRoute exact path="/thirdparty" component= 
              {ThirdParty}></ReactRoute>
            </ReactSwitch>
          </ReactRouter>
        </div>
      );
    }

Answer 1

上下文API和redux都是很好的解决方案。这样，您可以编写一个简单的效果钩子来更新工具栏标题上下文/调度redux操作来更改它。这个钩子将在由Road组件呈现的主组件中被调用。

另一种解决方案（但可能不太一致）是基于路径为可选工具栏标题创建映射对象。这样，您可以使用react router domuseLocationhook标识路径，并更改标题。例如

import React, { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";

const titles = {
  "/": "ERP System",
  "/thirdparty": "Third Party"
};

...
// Inside Toolbar component
const location = useLocation();
const [title, setTitle] = useState(titles["/"]);

useEffect(() => {
  setTitle(titles[location.pathname]);
}, [location.pathname]);

...

如果有依赖于ID值的路径，则效果内部需要更复杂的逻辑。