如果视图在React上的Route中，我如何取消重新渲染视图

Question

我有Objects.tsx和Property.tsx视图。

在Objects中，我用路由Property编写了Switch。

<Switch>
<Route
exact
path="/objects/property"
component={() => (
<Property />
)}
/>
</Switch>

在Objects中，通过单击输入复选框，我正在使用更改的搜索参数执行history.push，之后我的Property视图已重新呈现。如何在不重新渲染Property的情况下执行此操作？

完整Objects代码：

const Objects = () => {
const [params, setParam] = useParams<{[key: string]: any}>({});
const [checked, setChecked] = useState(!!params.checked);
const handleClickCheckbox = () => {
setChecked(!checked);
setParam('checked', !checked || '');
}
return (
<>
<div>
<input type="checkbox" onChange={handleClickCheckbox} checked={checked} />
</div>
<Switch>
<Route
exact
path="/objects/property"
component={() => (
<Property />
)}
/>
</Switch>
</>
);
};

Answer 1

只需传递函数组件本身，即可在每次渲染时重新定义它。

const Objects = () => {
...
return (
<>
<Switch>
<Route
exact
path="/objects/property"
component={Property}
/>
</Switch>
</>
);
};