如何使用 switch 或 if else 语句导航到 reactjs 中的另一个页面？

Question

我正在尝试执行用户在搜索框中输入单词的任务，如果搜索框为空或 null 显示错误，则导航到相应的路径，否则显示结果并导航到相应的路径。

请看下面我试过的代码，

    const handleKeyPress = (event) => {
    if( window.location.pathname === "/movies" && event.key === 'Enter' && searchText !== '')
    {
       history.push('/movies')
    }
    else  if( window.location.pathname === "/tvshows" && event.key === 'Enter' && searchText !== '')
    {
       history.push('/tvshows')
    }
   else if(searchText === '' && event.key === 'Enter'){
       alert ("Please enter text to search")
   }
}
const handleClick = (event) =>{
    if (searchText === '')
    {
        alert("Please enter text to search")
    }
    else if (window.location.pathname === "/movies"  && searchText !== '')
    {
        goToMovies()
    }
    else if (window.location.pathname === "/tvshows" && searchText !== '')
    {
        goTotvshows()
    }
}

tvshow 页面或组件上的代码

  const tfilterData = ((val) => {
    if (props.searchText === "" ) {
        return val
    } 
    else if (val.title?.toLowerCase().includes(props.searchText?.toLowerCase())) {
        return val
    } 
    
} );

{ tvData.length === 0 ? <NotFound notfound = "noResultText" /> : tvData.filter(tfilterData).map((tvshows) =>{
      return(
          <Card className={classes.cardMain}  key={tvshows.id}>
      <CardActionArea>
          <CardMedia className = {classes.cardImage}>
              <img style = {{width: '100%', height: '100%', objectFit: 'cover'}} 
                  src ={`https://image.tmdb.org/t/p/original/${tvshows.poster_path}`} 
                  alt = "tv poster"/>
          </CardMedia>
          <CardContent className = {classes.cardContent}>
              <Tooltip title = {tvshows.name} placement="top">
              <Typography className = {classes.movieTitle}>  {tvshows.name} </Typography>
              </Tooltip>
              <Typography 
                          className = {classes.typography1} 
                          variant="body2" 
                          component = "p"
                  > {tvshows.first_air_date} 
                  </Typography>
              <Rating 
                      className = {classes.typography2} 
                      name = "ratings"
                      value =  {tvshows.vote_average/2} 
                      precision={0.5}
                      readOnly                                
              />                             
          </CardContent>
      </CardActionArea>
      <CardActions style = {{justifyContent: 'space-evenly'}} >
          <Button className = {classes.cardButton} size = "small">Watch</Button>
          <Button className = {classes.cardButton} size = "small" >Share</Button>
          <Button className = {classes.cardButton}size = "small" onClick = {   ()=> addToWatchlist(tvshows) }> Add </Button> 
      </CardActions>                   
  </Card>
      );                    
  })}            
  </div>

电影页面/组件上的代码

  const filterData = ((val) => {
    if (props.searchText === "" ) {
        return val
    } 
    else if (val.title?.toLowerCase().includes(props.searchText?.toLowerCase())) {
        return val
    } 
    
} );

 <Grid
            item
            xs
            container
            direction="column"
            justifyContent="flex-start"
            alignItems="flex-start"
            style={{ backgroundColor: "black", width: "100%", height: "100%"}}
        >
            <div className={classes.filtermain}>
                <div className={classes.filterinner1}>
                    <Button className={classes.frecentlyadded}>Recently Added </Button>
                    <Button className={classes.fmostpopular}>Most Popular</Button>
                </div>
                <div className={classes.filterinner2}>
                    <Button className={classes.fyear}>Year</Button>
                    <Button className={classes.fgenre}>Genre</Button>
                    <Button className={classes.flanguage}>Language</Button>
                    <Button className={classes.fsortby}>Sort by</Button>
                </div>
            </div>
           
            <div  className ={classes.Main} > 
            { movieData.length === 0 ? <NotFound notfound = {noResultText} /> : movieData.filter(filterData).map((movie) =>{
                return(
                    <Card className={classes.cardMain}  key={movie.id}>
                <CardActionArea>
                    <CardMedia className = {classes.cardImage}>
                        <img style = {{width: '100%', height: '100%', objectFit: 'cover'}} 
                            src ={`https://image.tmdb.org/t/p/original/${movie.poster_path}`} 
                            alt = "movie poster"/>
                    </CardMedia>
                    <CardContent className = {classes.cardContent}>
                        <Tooltip title = {movie.title} placement="top">
                        <Typography className = {classes.movieTitle}>  {movie.title} </Typography>
                        </Tooltip>
                        <Typography 
                                    className = {classes.typography1} 
                                    variant="body2" 
                                    component = "p"
                            > {movie.release_date} 
                            </Typography>
                        <Rating 
                                className = {classes.typography2} 
                                name = "ratings"
                                value =  {movie.vote_average/2} 
                                precision={0.5}
                                readOnly                                
                        />                             
                    </CardContent>
                </CardActionArea>
                <CardActions style = {{justifyContent: 'space-evenly'}} >
                    <Button className = {classes.cardButton} size = "small">Watch</Button>
                    <Button className = {classes.cardButton} size = "small" >Share</Button>
                    <Button className = {classes.cardButton}size = "small" onClick = {   ()=> addToWatchlist(movie) }> Add </Button> 
                </CardActions>                   
            </Card>
                );                    
            })}            
            </div>
        </Grid> 

错误

任何帮助深表感谢。 我试过这个，但它显示一条错误消息并且应用程序崩溃了。

Answer 1

谢谢您的帮助，

所以我找到了答案，错误是它与我正在使用的 API 或 object 具有相同的命名约定，并且我在互联网上发现 dom 呈现它将获得的第一个或最后一个值，如果它们都是同样它会通过这样的错误。

谢谢