在reactjs中，我如何更改我的URL

Question

下面的代码添加了一个下一个按钮，以从我的后端获取接下来的20个项目，单击按钮时，数据更改，我将获得下一个20个项目，但是URL不会更改。

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;

我该如何解决？我不确定“到”和“ onclick”一起工作。如何与数据一起更改URL？

Answer 1

问题

e.preventDefault（）;在单击处理程序中防止默认导航操作发生。

解决方案

我认为没有任何理由可以防止此操作，因此我建议删除此调用以防止默认操作。

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

首选解决方案

假设您拥有path =“/pokemon/page/：page”的路线，则应使用useparams钩子>钩子和“嗅探”当前页面。这完全消除了同步URL路径和局部反应状态的需求，只有一个真理来源，即URL路径。

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