web-dev-qa-db-ja.com

次のJS Router.Push Reloadsページ

私がする時 Router.Pushマイページがリロードされ、私はプッシュステートを使用することを期待します。

コンポーネント内の次のコードを使用して下さい:

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.

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;
  }
};
 _
7
HMR

失われた魂が私の問題とここに来る場合、それは見えないようなものでした。

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名が正しいことを確認してください。

4
ZenVentzi