0

我有一个反应应用程序，需要链接到一个名为“CourseSelectionContainer”的组件，并传递一个“lessonId”参数。链接是在“CoursesSetupMenu”组件中设置的，我使用下面的链接格式。

 <Link to = {
    { pathname: `${activity.gradeLevelURL}` + "/GradeLevel",
      state: {lessonId: activity.lessonId}
    }
}>

路由器代码位于“CoursesSetupRouter”组件中，如下所示：

  return (
    <>
      <Switch>
        <PrivateRoute path="/learners/publicCourses/Vocabulary/GradeLevel"
          component={() => (<CourseSelectionContainer />)}/>
        <PrivateRoute
          path="/learners/publicCourses/History/GradeLevel"
          render={(props) => <CourseSelectionContainer {...props} />} />
      </Switch>
    </>
  );

请注意，基于其他一些 Stackoverflow 问题，我已经尝试了上面显示的两种格式来路由到组件。渲染 Menu 和 router 的容器包含如下代码：

        </div>
        { (lessonMenuItems != undefined &&
          lessonMenuItems != null &&
          lessonMenuItems.length > 0) &&
        <CoursesSetupMenu
           coursesMenuItems = {lessonMenuItems}
           coursesURL={url}
       />}
      </Drawer> 
      <Container maxWidth="lg" className={classes.container}>
          <Grid container spacing={1}>
          <CoursesSetupRouter/>
          </Grid>
        </Container>
    </div>

由于某种原因，该路径被维护为进入菜单之前的路径。我使用下面的控制台日志打印出这些值，以查看发生了哪些变化，哪些没有发生变化。

  let location = useLocation();
  console.log ("GradeLevelSetupMenu - Start - location = ", location)

  let { path, url } = useRouteMatch();
  console.log ("GradeLevelSetupMenu - path = ", path);
  console.log ("GradeLevelSetupMenu - url = ", url);

这表明，根据位置，路径名 =“/learners/publicCourses/Vocabulary/GradeLevel”，这是预期的。

不幸的是，路径和 URL 仍然指示，path = “/learners/publicCourses/Vocabulary”。URL 指向相同的位置。这是应用程序被路由到的地方。

根据对链接的选择，我预计路径和 URL 都会更改为 /learners/publicCourses/Vocabulary/GradeLevel 并路由到随附的组件。那没有发生。

我是否需要做其他事情来强制路由按预期发生，到 /learners/publicCourses/Vocabulary/GradeLevel ？我的逻辑或语法还有其他问题吗？

4

0 回答 0