动态路由Reactjs

Question

我正在尝试实现动态路由。我不知道我错过了什么。在这里，我试图在groupId的基础上呈现LunchContainer。她正在使用react-router和react-router-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);

我使用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;

Answer 1

1)如果您使用react-router-dom，不需要单独使用react-router，因为react-router在react-router-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>
         .......
  );
}

3)我想这是你的拼写错误的<PrivateRoute exact path="/lunch/:groupId" component={LunchContainer} />