React-router-Dom usenavigation重新渲染问题

Question

我正在制作一个地图应用程序。它是一个全页地图应用程序。在应用程序中，我通过url搜索参数将状态传递给redux。我用redux上的状态有条件地渲染组件。

搜索参数随着地图上的每次移动而变化。如=比;http://localhost: 8080/?地图= 2 d&液化天然气= 28.751577606036108,lat = 41.117485501450204, z = 10,轴承= 10,距= 0

=比;http://localhost: 8080/?地图= 2 d&液化天然气= 28.753937232765566,lat = 40.981906338895925, z = 14.856764993412996,轴承= -111.59999999999997,距= 42.000000000000014

应用程序中的其他内容都显示在侧边栏上。侧边栏有几个状态，这些状态通过动态url呈现如=比;侧边栏的主视图位于这个url目录中。"http://localhost: 8080/?地图= 2 d&液化天然气= 29.038691,lat = 41.055667, z = 10,轴承= 10,距= 0">

侧边栏的详细状态通过这个url显示。"http://localhost: 8080/细节/2 ?地图= 2 d"

我有一些卡片即将在侧边栏的主状态中被触发。我正在使用useNavigate做点击功能。然而，我的卡片被重新渲染，因为搜索参数随着每次地图移动而改变。

我需要做什么来解决这个问题?谢谢你

useNavigateSearch.js

import {createSearchParams, useNavigate} from "react-router-dom";
const useNavigateSearch = () => {
const navigate = useNavigate();
return (pathname, params) =>
navigate({ pathname, search: `?${createSearchParams(params)}` });
> };
export default useNavigateSearch;

Card.js

import useNavigateSearch from "../../../hooks/useNavigateSearch";
const Card = ({title, img, color, route,id}) => {
const navigate = useNavigateSearch();
console.log('render')
const handleClick = (route,id) => {
navigate(`${route}/${id}`, {map: '2d'})
}
return (
<div className="w-24 h-20 mt-1 flex flex-col justify-center items-center cursor-pointer"
onClick={()=> handleClick(route,id)}>
<div className={`w-12 h-12 ${color} rounded-full flex justify-center items-center`}>
<img src={img} className="w-8 h-8 brightness-0 invert"/>
</div>
<div className="text-sm">
{title}
</div>
</div>
)
}

Answer 1

不幸的是，这就是useNavigate的设计方式。如果url改变了，每个使用useNavigate的组件都将呈现。他们的github页面上有一个问题在讨论这个问题:https://github.com/remix-run/react-router/issues/7634

来自Ryan Florance (react-router的共同创造者)的最新建议是，如果你使用6.4版本，你可以创建一个自定义的BrowserRouter，然后导出它，而不是使用useNavigate，你导入该路由器并调用.navigate:

这个问题可以通过6.4中的新路由器解决。

import { createBrowserRouter } from "react-router-dom";
const router = createBrowserRouter([ /* ... routes ... */ ]):
export { router }

import { router } from "./router";
// call this anywhere you want in your app,
// it's outside of the react render cycle and will
// never change
router.navigate("/anywhere/you/want");

见:https://github.com/remix-run/react-router/issues/7634 issuecomment - 1306650156