reactjs - 反应如何更改标题标题以匹配 URL

Question

我无法更改标题的标题以匹配用户所在的页面。基本上，当用户单击主页上的按钮时，我希望下一页的标题标题与用户单击的按钮的名称相匹配。

这是我正在调用的数组的代码：

const mockData = [
    {
      id: 1,
      name: 'squat',
      weight: 100
    },
    {
      id: 2,
      name: 'bench',
      weight: 200
    },
    {
      id: 3,
      name: 'deadlift',
      weight: 300
    },
  ];

这是标题按钮组件的代码：

import React, { useState} from 'react';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';
import history from '../../utils/history';

export default function HeaderButton(props) {
    const classes = useStyles();
    const [ title ] = useState(props.title)

    return (
        <div>
            <Button
                variant="contained"
                className={classes.button}
                onClick={() => history.push("/")}>   
                {title} 
            </Button>
        </div>
    );
};

这是主页上按钮的代码：

function HomePage(props) {
    const {
        movements,
        dispatchLoadMovements,
    } = props;
    const classes = useStyles();
    const newMovements = movements && movements.map((movement) => 
        <Button 
            key={movement.id}
            title={movement.name}
            className={classes.button}
            onClick={() => history.push(`/movement/${movement.id}`)}>
            {movement.name}
        </Button>
    );

以下是用户单击其中一个按钮时加载的页面的代码：

 function PercentPage(props) {
    const {
        movements,
        dispatchLoadMovements,
    } = props;
    const newMovements = movements && movements.map((movement) => 
    <div key={movement.id}>
            {movement.name}
        </div>
    );

    useEffect(() => {
        dispatchLoadMovements(INITIAL_PAGE, null);
        // eslint-disable-next-line
      }, []);

    return (
        <div>
            <HeaderButton onClick={() => history.push(`/`)} title={newMovements}></HeaderButton>

就我现在所拥有的，下一页的标题标题为“SQUATBENCHDEADLIFT”，而不仅仅是“SQUAT”、“BENCH”或“DEADLIFT”，具体取决于用户单击的按钮。任何帮助，将不胜感激！

标签： reactjsurlbuttonheader