How do I change my URL on click in ReactJS

user_18045784 0
Viewed 617

The below code adds a next button to get the next 20 items from my backend, on clicking the button the data changes and I get my next 20 items, but the url does not change.

function PokemonList() {
const classes = useStyles();
let [pageNum, setPageNum] = useState(0);


  const { loading, error, data } = useQuery(pokemonList, { variables: { pageNum: pageNum } });
 
  
  function handleClick(e){
    e.preventDefault();
    setPageNum(parseInt(pageNum)+1)
    }
  if(error) {
    return <h1> error</h1>;
   }
   
   if(loading) {
    return <h1> loading</h1>;
   }
  

  return (
    <div className="App">
      {data.pokemonList.map((data) => (
        
    <Card className={classes.card} variant='outlined'>
                <CardHeader className={classes.titleHead} title={data.id} />
                <CardMedia
                    className={classes.media}
                    component='img'
                    image={data.url}
                    title='image'
                />

                <CardContent>
                    <Typography variant='body2' color='textSecondary' component='span'>
                        <p>{data.name}</p>

                        
            <br/>
            <br/>
            <br></br>

      

                    </Typography>
                </CardContent>
            </Card>
        
      ))}
<Link onClick={handleClick} className='characterlink2' to={`/pokemon/page/${parseInt(pageNum)+1}`}>
<button>

                        Next
                        </button>
                    </Link>
    </div>
  );
}

export default PokemonList;

How can I fix this? I am not sure that the "to" and "onClick" work together. How do I change the url along with the data?

apollo-client use-state react-router-dom reactjs onclick
1 Answers

Issue

e.preventDefault(); in the click handler prevents the default navigation action from occurring.

Solution

I don't see any reason for this action to be prevented, so I suggest removing this call to prevent the default action.

function handleClick(e){
  setPageNum(page => page + 1);
}

Preferred solution

Assuming you've a route with path="/pokemon/page/:page" you should use the useParams hook and "sniff" the current page. This completely eliminates the need to synchronize the URL path and local React state, there's only one source of truth, the URL path.

import { useParams } from 'react-router-dom';

...

function PokemonList() {
  const classes = useStyles();
  const { page } = useParams();

  const { loading, error, data } = useQuery(
    pokemonList,
    { variables: { pageNum: page } },
  );

  if (error) {
    return <h1>error</h1>;
  }
   
  if (loading) {
    return <h1>loading</h1>;
  }

  return (
    <div className="App">
      {data.pokemonList.map((data) => (
        ...
      ))}
      <Link
        className='characterlink2'
        to={`/pokemon/page/${Number(page) + 1}`}
      >
        <button type="button">Next</button>
      </Link>
    </div>
  );
}
user_86908570
Related