問題タブ [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.
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
:
したがって、削除するLogo
とMessageStyle
ページがレンダリングされます。
reactjs - NextJS でファイルベースのルーティングの代わりにルーティングを手動で構成する方法
Next.js では知っていますが、アプリケーションの構造をファイル システムで表現します。ファイルがページ ディレクトリに追加されると、ルートとして自動的に利用可能になります。例えば:
pages/about.js → /about
pages/blog.js → /blog
pages/index.js → /
しかし、パスごとにレンダリングするコンポーネント ファイルを手動で選択したいと考えています。たとえば、次のコードでは、パス URL がlocalhost:3000/aboutの場合にサービス コンポーネントをレンダリングしたいのですが、ルーティング パス名に従ってファイル名を作成したくありません。
React Router/Reach-Router を使用せずにこの問題を解決するにはどうすればよいですか。サードパーティのライブラリをインストールせずに利用できる他のオプションはありますか?
前もって感謝します :)
reactjs - Jest で WithRouter をモックする
以下の簡単な例があり、withRouter のモック実装を変更しようとしています。残念ながら、これは期待どおりに機能していないようです。2 番目のモック実装はまったく呼び出されません。
成分
テストファイル
出力
javascript - Next.js ルーティング: スラッグ ページから新しいルートをプッシュしても正しくルーティングされない
と の 2 つのルートがある/video
とします。/products/[id]
したがって、pages
フォルダーには と が含まれvideo.js
ますproducts/[id].js
。router.push
またはを使用してfromLink
に移動すると、URL が に更新されます。明らかに、これは正しい動作ではありません。/video
/products/[id]
/products/video
私は何が欠けていますか?
reactjs - Next.jsでルーターの変更をリッスンしながら状態を変更するには?
私が達成しようとしているのは、 githubでこの React アプリとルーターを変更する際のメニューの開閉アニメーションとまったく同じですが、Next.js を使用することです (ほとんど同じコードです)。
ここに githubの私のアプリリポジトリがあり、ここにアプリ ライブがあります。
Next.jsのドキュメントをたどろうとしているのですが、状態menuOpened
が更新されていないようです。
どんな助けでも大歓迎です!乾杯!