如何在React子路由中获取参数路径

问题描述

我正在尝试使用params id在子组件中获取详细视图，但是，我遇到了下一个错误

Error message

我正在阅读有关react-router的内容以查找问题，我看到我必须使用Router。还有另一种无需使用路由器即可获取参数的方法吗？我想像父组件一样使用仪表板，所以...也许是一种将参数传递给父组件并在子组件中使用道具的方法...我不知道。

我的代码是：

routes.js

const routes = [
{
path: 'app',element: <DashboardLayout />,children: [
  { path: 'movies',element: <MovieList /> },{ path: 'movie/:id',element: <AccountView/>},]
}
export default routes;

DetailView.js

class Detail extends React.Component {

  componentDidMount() {
  
    this.props.detail_movie(this.props.match.params.id);
  }

  render(){
    const { classes,movie} = this.props;
    return(
      <Page
      className={classes.root}
      title="Account"
    >
      <Container maxWidth="lg">
        <Grid
          container
          spacing={3}
        >
          <Grid
            item
            lg={4}
            md={6}
            xs={12}
          >
            <Profile 
              movie = {movie}
            />
          </Grid>
          <Grid
            item
            lg={8}
            md={6}
            xs={12}
          >
            <Details
              movie = {movie}
            />
          </Grid>
        </Grid>
      </Container>
    </Page>
    );
  }
}

const mapStatetoProps = state => ({
  movie: state.movies.movie
});

export default connect(mapStatetoProps,{detail_movie})(withStyles(styles)(Detail));

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）