如何在 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;

我该如何解决这个问题？我不确定“to”和“onClick”是否一起工作。如何更改 url 和数据？

Answer 1

问题

单击处理程序中的

e.preventDefault(); 阻止了默认导航操作的发生。

解决方案

我看不出有任何理由阻止此操作，因此我建议删除此调用以阻止默认操作。

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

首选方案

假设您有一个带有 path="/pokemon/page/:page" 的路由，您应该使用 useParams 挂钩并“嗅探”当前页面。这完全消除了同步 URL 路径和本地 React 状态的需要，只有一个真实来源，即 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>
  );
}

如何在 ReactJS 中单击时更改我的 URL

How do I change my URL on click in ReactJS

onclick

reactjs

apollo-client

react-router-dom

use-state

问题

解决方案

首选方案