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

Question

I am trying to perform a task where a user types in a word in the search box, and if the search box is empty or null show error, and navigate to the respective path, else show the result and navigate to the respective path.

Please see the code below i tried,

    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()
    }
}

The code on tvshow page or component

  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>

the code on the movie page/component

  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> 

The Error

any help is much appreciated. I tried this but it shows an error message and the app gets crashed.

Answer 1

Thanks for the help,

So I found the answer, the error was that it had the same naming convention for the API or object I was using, and I found on the internet that dom renders the first or the last value which it will get , and if they both are same it will through such error.

Thanks