Reactjs 动态路由

我正在尝试实现动态路由。我不知道我错过了什么。在这里，我试图在groupId的基础上呈现午餐容器。我正在使用react路由器和react路由器dom

组件代码

export class DashboardScreen extends Component {
  constructor(props) {
    super(props);
}

  render() {
    const { classes } = this.props;
    return (
      ..........
              <Link className={classes.link} to={`/lunch/$groupId`>
                <Button className={classes.button}>
                  Lunch
                </Button>
              </Link>
           .......
    );
  }
}

const styles = theme => ({
  ......
});

export default withStyles(styles)(DashboardScreen);

导出类仪表板屏幕扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
const{classes}=this.props；
返回(
..........
午餐
.......
);
}
}
常量样式=主题=>({
......
});
导出默认样式（样式）（仪表板屏幕）；

我使用App.js文件进行路由

import { LunchContainer } from "./components/dashboard/Lunch";

export class App extends Component {
           ....
          <Switch>
           ......
            <PrivateRoute exact path="/lunch/:grouId" component={LunchContainer} />
           .......
          </Switch>
         ....

export default App;

从“/components/dashboard/午餐”导入{午餐容器}；
导出类应用程序扩展组件{
....
......
.......
....
导出默认应用程序；
1）如果您使用
反应路由器dom无需单独使用
反应路由器，因为
反应路由器用作
反应路由器dom的核心

2） 我想改变你的渲染如下

render() {

  const { classes, match } = this.props;
  return (
    ..........
            <Link className={classes.link} to={`/lunch/${match.params.groupId}`>
              <Button className={classes.button}>
                Lunch
              </Button>
            </Link>
         .......
  );
}

render（）{
const{classes，match}=this.props；
返回(
..........
午餐
.......
);
}

3） 我想这是你的打字错误