Reactjs React路由器转到正确的URL，但不更新视图

我在我的React应用程序中使用React路由器来跟踪配方。这里的组件为每个配方卡生成链接，然后显示所选配方的详细页面。当我点击卡片中的链接时，我被带到了正确的URL，但是视图没有显示组件中的内容，而是显示了基本URL中的主屏幕组件。我需要做什么更改才能使URL

recipe/{id}

实际显示组件

export default function RecipeReviewCard(props) {
  const classes = useStyles();
  return (
    // TODO: Make this link to the actual recipe detail screen.
    <div>
      <Link to={'recipe/' + props.recipe.id}>
        <Card className={classes.root}>
          <CardHeader
            title={props.recipe.title}
            subheader={props.recipe.prepTime}
          />
          <CardMedia
            className={classes.media}
            image={props.recipe.imageURL}
            title={props.recipe.title}
          />
          <CardContent>
            <Typography variant='body2' color='textSecondary' component='p'>
              {props.recipe.description}
            </Typography>
          </CardContent>
        </Card>
      </Link>
      <Switch>
        <Route exact path={'recipe/' + props.recipe.id}>
          <RecipeDetail />
        </Route>
      </Switch>
    </div>
  );

导出默认功能RecipeReviewCard（道具）{
const classes=useStyles（）；
返回(
//TODO:将此链接链接到“实际配方详细信息”屏幕。
{props.recipe.description}
);

第二个组件是父类，它也在使用router为应用程序中的主导航栏定义一些路径。可能我的路由的优先级有问题，出于某种原因，它采用默认的“/”路由

export default function PermanentDrawerLeft() {
  const classes = useStyles();

  // TODO: Fix font/style on the nav bar buttons.
  return (
    <div className={classes.root}>
      <AppBar position='fixed' className={classes.appBar}>
        <Toolbar>
          <Typography variant='h6' noWrap>
            <Switch>
              <Route path='/'>Kitchen Assistant</Route>
              <Route path='/cookbooks'>Cookbooks</Route>
              <Route path='/search'>Search</Route>
              <Route path='/settings'>Settings</Route>
            </Switch>
          </Typography>
        </Toolbar>
      </AppBar>
      <Drawer
        className={classes.drawer}
        variant='permanent'
        classes={{
          paper: classes.drawerPaper,
        }}
        anchor='left'
      >
        <div className={classes.toolbar} />
        <Divider />
        <Link to='/cookbooks'>
          <ListItem button key={'Cookbooks'}>
            <ListItemIcon>
              <MenuBookIcon />
            </ListItemIcon>
            <ListItemText primary={'Cookbooks'} />
          </ListItem>
        </Link>
        <Link to='/search'>
          <ListItem button key={'Search'}>
            <ListItemIcon>
              <SearchIcon />
            </ListItemIcon>
            <ListItemText primary={'Search'} />
          </ListItem>
        </Link>
        <Divider />
        <Link to='/settings'>
          <ListItem button key={'Settings'}>
            <ListItemIcon>
              <SettingsIcon />
            </ListItemIcon>
            <ListItemText primary={'Settings'} />
          </ListItem>
        </Link>
      </Drawer>
      <main className={classes.content}>
        <div className={classes.toolbar} />
        <Switch>
          <Route path='/cookbooks'>
            <Cookbooks />
          </Route>
          <Route path='/search'>
            <Search />
          </Route>
          <Route path='/settings'>
            <Settings />
          </Route>
          <Route path='/'>
            <Home />
          </Route>
        </Switch>
      </main>
    </div>

导出默认函数PermanentDrawerLeft（）{
const classes=useStyles（）；
//TODO:修复导航栏按钮上的字体/样式。
返回(
厨房助理
烹饪菜谱
搜寻
设置

您的路由声明很可能会遇到特殊性问题。您需要在不希望级联的路由上指定

精确的

布尔值

例如：

<Route path='/' component={Home} />

将始终匹配，但：

<Route exact path='/' component={Home} />

仅当您位于

http://www.yoursite.com

而非

http://www.yoursite.com/recipes

请查看相关文档。

呈现与 地点

这意味着您可以在您的

路线上使用
exact
道具，或者只需先指定更多特定路径，即在“/pathA”之前指定“/pathA/pathB”

为了使
RecipedDetail
可能加载正确的页面，需要从中提取匹配参数

如果在功能组件中使用挂钩

const { recipeId } = useParams();

我想我们需要看看外部路由是如何定义的。这里没有足够的上下文。我敢打赌，主路由具有更高的优先级，并且是首先呈现的。很好的一点，因此此组件是另一个组件的子组件，这是主路由的定义位置，例如主页。我将编辑我的帖子以添加该组件。我该怎么做告诉路由器不要优先考虑主路由？您使用的是哪个
路由器
？您是如何导入它的？谢谢，这很有帮助。添加“精确到路径=”/“使它停止显示主路由组件，但它仍然不会显示我希望看到的组件。。。
<Switch>
  <Route path='/cookbooks'>
    <Cookbooks />
  </Route>
  <Route path='/search'>
    <Search />
  </Route>
  <Route path='/settings'>
    <Settings />
  </Route>
  <Route exact path='recipe/:recipeId'> // <-- specify path and match param
    <RecipeDetail />
  </Route>
  <Route path='/'>
    <Home />
  </Route>
</Switch>

For class-based components or any component directly rendered by the `Route` or wrapped with the [`withRouter`][3] Higher Order Component

props.match.params.recipeId

const { recipeId } = useParams();