問題タブ [next-router]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
3 に答える
1724 参照

reactjs - next.js を使用してパスワードのリセット フォーム ルートを作成する方法

以下の編集を参照してください。

プロジェクトでパスワードのリセットの問題が発生しています。ハッシュ化されたトークンと内部のユーザー ID を使用してパスワードをリセットするためのリンクを記載したメールをユーザーに送信できます。

コードの 99% は既に完了しています (バックエンドとフロントエンド)。唯一のことは、正しい API エンドポイントを呼び出してユーザーに表示するために、ハッシュされたトークンとクライアント側の ID を取得できないことです。パスワードをリセットするためのフォームと、トークン、有効期限などをチェックするロジックがあります。

私は使用しreact-router-domていません (このルートにのみ使用しようとしても、とにかく機能させることはできません)。

基本的に、ユーザーに送信するリンクは次のとおりです。

私のルートは次のようになります。

ここで、このような react-router-dom の機能を、次のようにページ フォルダー内の reset-password-form.js ファイルに追加しようとしました。

そして、問題は、必要なパラメーターを取得できないため、正しい API エンドポイントを呼び出すことができないことです。コンポーネントは次のようになります (コンポーネント全体ではなく、数行のコードです)。

そのため、今リンクをクリックすると、404 page not found が表示されます。

クライアント側でこれらのパラメーターを取得するにはどうすればよいですか?

編集:

だから今、私はnext/routerそれが提案されたように使用しています。

/最初に、トークンが内部でハッシュされると、トークンを読み取ることができず、404 ページが表示されることに気付きnext/routerました (おそらく、2 つ以上のパラメーターがあると考えているためですか?)。なしでルートを調整しようとしました/が、成功しませんでした。

デバッグの目的でreset-password-form/[resetToken]/[userId].js、ページ フォルダーに移動すると、次のようになります。

これにより、結果としてハッシュされたトークン (/内部なしで生成された場合のみ) とuserId.

デバッグ後、2つのpタグを削除しResetPasswordPage、リターン内でコンポーネントを渡し、必要なパラメーターを小道具として渡し、次のように取得します(ResetPasswordPageコンポーネント):

しかし、そうすれば私は得るでしょうError: React.Children.only expected to receive a single React element child

コンポーネントから他の 2 つの子を削除すると、ResetPasswordPage必要なページがレンダリングされます (トークンが なしで生成された場合のみ/)。他の 2 つの子もレンダリングする方法はありますか (3 つのコンポーネントの間に <> </> タグがあります)。これらはページが機能するために重要です (ナビゲーション リンクとエラー/成功メッセージが表示されます)。

/トークンが でハッシュされた場合にユーザーが 404 ページを取得するという事実を回避するにはどうすればよいですか?

編集 2.0

コンポーネントの完全なコードResetPasswordPage:

したがって、削除するLogoMessageStyleページがレンダリングされます。

0 投票する
0 に答える
312 参照

reactjs - NextJS でファイルベースのルーティングの代わりにルーティングを手動で構成する方法

Next.js では知っていますが、アプリケーションの構造をファイル システムで表現します。ファイルがページ ディレクトリに追加されると、ルートとして自動的に利用可能になります。例えば:

pages/about.js → /about

pages/blog.js → /blog

pages/index.js → /

しかし、パスごとにレンダリングするコンポーネント ファイルを手動で選択したいと考えています。たとえば、次のコードでは、パス URL がlocalhost:3000/aboutの場合にサービス コンポーネントをレンダリングしたいのですが、ルーティング パス名に従ってファイル名を作成したくありません。

React Router/Reach-Router を使用せずにこの問題を解決するにはどうすればよいですか。サードパーティのライブラリをインストールせずに利用できる他のオプションはありますか?

前もって感謝します :)

0 投票する
0 に答える
254 参照

reactjs - Jest で WithRouter をモックする

以下の簡単な例があり、withRouter のモック実装を変更しようとしています。残念ながら、これは期待どおりに機能していないようです。2 番目のモック実装はまったく呼び出されません。

成分

テストファイル

出力

0 投票する
2 に答える
82 参照

javascript - Next.js ルーティング: スラッグ ページから新しいルートをプッシュしても正しくルーティングされない

と の 2 つのルートがある/videoとします。/products/[id]したがって、pagesフォルダーには と が含まれvideo.jsますproducts/[id].jsrouter.pushまたはを使用してfromLinkに移動すると、URL が に更新されます。明らかに、これは正しい動作ではありません。/video/products/[id]/products/video

私は何が欠けていますか?

0 投票する
0 に答える
195 参照

reactjs - Next.jsでルーターの変更をリッスンしながら状態を変更するには?

私が達成しようとしているのは、 githubでこの React アプリとルーターを変更する際のメニューの開閉アニメーションとまったく同じですが、Next.js を使用することです (ほとんど同じコードです)。

ここに githubの私のアプリリポジトリがあり、ここにアプリ ライブがあります。

Next.jsのドキュメントをたどろうとしているのですが、状態menuOpenedが更新されていないようです。

どんな助けでも大歓迎です!乾杯!