代码之家 › 专栏 › 技术社区 › Tom Brooke

如何在点击后更改我的URL

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

Tom Brooke · 技术社区 · 3 年前

下面的代码添加了一个“下一步”按钮,以从我的后端获取接下来的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?

1 回复 | 直到 3 年前

Drew Reese 3 年前

问题

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