下一个 js Router.push 重新加载页面
next js Router.push reloads page
当我 Router.push
我的页面重新加载时,我希望使用 pushState。
在组件中使用以下代码:
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>
我的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
时,它按预期工作:
const search = useCallback(
e => {
e.preventDefault();
Router.push({
pathname: "/products-search",
query: { q: searchText }
});
},
[searchText]
);
const 搜索 = () => {
router.push(
/products-search/[searchText]
,
/products- search/${searchText}
,
{浅:真}
);
}
万一有迷失的灵魂带着我的问题来到这里,它是隐形的。
router.push(
'/organizations/[oid]/clients/[uid]',
`/organizations/${oid}/clients/${id}`
);
是我写的,它在没有刷新的情况下导航。
router.push(
'/organizations/[oid]/clients/[cid]',// cid mistaken name but still worked. Should be uid
`/organizations/${oid}/clients/${id}`
);
错误的 ID 名称导致刷新,但它仍然导航到正确的页面。
因此,请确保 ID 名称正确无误。
当我 Router.push
我的页面重新加载时,我希望使用 pushState。
在组件中使用以下代码:
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>
我的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
时,它按预期工作:
const search = useCallback(
e => {
e.preventDefault();
Router.push({
pathname: "/products-search",
query: { q: searchText }
});
},
[searchText]
);
const 搜索 = () => {
router.push(
/products-search/[searchText]
,
/products- search/${searchText}
,
{浅:真}
);
}
万一有迷失的灵魂带着我的问题来到这里,它是隐形的。
router.push(
'/organizations/[oid]/clients/[uid]',
`/organizations/${oid}/clients/${id}`
);
是我写的,它在没有刷新的情况下导航。
router.push(
'/organizations/[oid]/clients/[cid]',// cid mistaken name but still worked. Should be uid
`/organizations/${oid}/clients/${id}`
);
错误的 ID 名称导致刷新,但它仍然导航到正确的页面。 因此,请确保 ID 名称正确无误。