下一个 js Router.push 重新加载页面 [英] next js Router.push reloads page
本文介绍了下一个 js Router.push 重新加载页面的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当我执行 Router.push
我的页面重新加载时,我希望使用 pushState.
When I do Router.push
my page reloads, I would expect pushState to be used.
在组件中使用以下代码:
Using the following code in the component:
import Router from "next/router";
//other code
const search = useCallback(
e => {
e.preventDefault();
Router.push(
`/products-search/${encodeURIComponent(
searchText
)}`,
`/products-search?q=${encodeURIComponent(
searchText
)}`
);
},
[searchText]
);
//other code
<form onSubmit={search}>
<input
type="text"
onChange={change}
value={searchText}
pattern=".{3,}"
title="3 characters minimum"
required
/>
<button type="submit">OK</button>
</form>
我的页面/products-search.js
My page/products-search.js
ProductsSearch.getInitialProps = ({ query, store }) => {
//added try catch as next js may reload if there is an error
// running this on the client side
try {
const queryWithPage = withPage(query);
return {
query: queryWithPage
};
} catch (e) {
debugger;
}
};
推荐答案
当我将对象传递给 Router.push
时,它按预期工作:
When I pass an object to Router.push
it works as expected:
const search = useCallback(
e => {
e.preventDefault();
Router.push({
pathname: "/products-search",
query: { q: searchText }
});
},
[searchText]
);
这篇关于下一个 js Router.push 重新加载页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文