如何在 React js Web 应用程序的页面导航中更改 Material UI 工具栏中的标题？

Question

我有 React 功能组件 MainToolBar。在导航到其他页面（功能组件）时，我需要更改 MainToolBar 的标题。我怎么能那样做？使用 Context API 或 Redux 或任何其他简单的东西

下面是 MainToolBar.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

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

另一个解决方案，但可能不太一致，是为基于路径的可选工具栏标题创建映射 object。这样您就可以使用 react-router-dom useLocation 挂钩识别路径，并更改效果中的标题。例如，

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 值，则效果内部需要更复杂的逻辑。

如何在 React js Web 应用程序的页面导航中更改 Material UI 工具栏中的标题？

How to change title in Material UI ToolBar on page navigation in react js web application?

reactjs

material-ui

react-redux

react-context