عبد النور محمد نشر 3 سبتمبر 2021 أرسل تقرير مشاركة نشر 3 سبتمبر 2021 لدي صفحة index وأردت إعادة التوجيه إلى صفحة orders عندما يدخل إلى صفحة index. ما هي الطريقة الصحيحة للقيام بذلك؟ أنا أستخدم Next JS React. import { useRouter } from 'next/router' const Index = () => { const router = useRouter() return router.replace('/orders') } 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
1 Yomna Raouf نشر 3 سبتمبر 2021 أرسل تقرير مشاركة نشر 3 سبتمبر 2021 إذا كنت تستخدم نسخة Next.js 10 فما فوق، يمكنك القيام بذلك بالطريقة التالية: import Router from 'next/router' componentDidMount(){ const {pathname} = Router if(pathname == '/' ){ Router.push('/orders') } } أو باستخدام الخطافات Hooks import React, { useEffect } from "react"; import Router from 'next/router' ... useEffect(() => { const {pathname} = Router if(pathname == '/' ){ Router.push('/orders') } }); أو يمكنك القيام ب server side redirects باستخدام الكلمة المفتاحية redirect داخل getServerSideProps أو getStaticProps export async function getServerSideProps(context) { const res = await fetch(`https://.../data`) const data = await res.json() // or use context.resolvedUrl for conditional redirect // if(context.resolvedUrl == "/") if (!data) { return { redirect: { destination: '/orders', permanent: false, }, } } return { props: {}, // will be passed to the page component as props } } و لكن إعادة التوجيه في ال client side لا تعتبر approach جيد للقيام بذلك حيث يمكنك القيام بذلك من خلال next.config.js لاحظ المثال التالي أو استخدام conditional rendering: module.exports = { // Uncomment the line below to enable basePath, pages and // redirects will then have a path prefix (`/app` in this case) // // basePath: '/app', async redirects() { return [ { source: '/team', destination: '/about', permanent: false, }, // Path Matching - will match `/old-blog/a`, but not `/old-blog/a/b` { source: '/old-blog/:slug', destination: '/news/:slug', permanent: false, }, // Wildcard Path Matching - will match `/blog/a` and `/blog/a/b` { source: '/blog/:slug*', destination: '/news/:slug*', permanent: false, }, // Regex Path Matching - The regex below will match `/post/123` but not `/post/abc` { source: '/post/:slug(\\d{1,})', destination: '/news/:slug', permanent: false, }, ] }, } اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
عبد النور محمد
لدي صفحة index وأردت إعادة التوجيه إلى صفحة orders عندما يدخل إلى صفحة index. ما هي الطريقة الصحيحة للقيام بذلك؟ أنا أستخدم Next JS React.
رابط هذا التعليق
شارك على الشبكات الإجتماعية
1 جواب على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.