Question

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

我正在阅读有关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));

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

0 个答案: