اذهب إلى المحتوى
  • 0

تحويل المستخدم إلى route معين في React - Gatsby

Adam Ebrahim

السؤال

أحاول أن أقوم بعمل مدونة وأريد أن يتم تحويل المستخدم من الصفحة الرئيسية / إلى  صفحة /posts وهذه الأخيرة يتم توليدها من قِبل gatsby-node.js، حاولت أن أستخدم المكون Redirect من حزمة @reach-router في مكون Index لكي يتم تحويل المستخدمين تلقائيًا لكن أصبح يظهر لدي خطأ Uncaught RedirectRequest 

هذا هو الكود الخاص بالصفحة الرئيسية / :

import React from 'react'
import { Redirect } from '@reach/router'


class Index extends React.Component {
  render() {
    return (
      <Redirect to={`/posts`} />
    )
  }
}

export default Index

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

يمكنك إضافة ال noThrow لل redirect ليكون كالتالي

 return (
   <Redirect noThrow to={`/posts`} />
 )

حيث أن ال redirect تعمل مع ال componentDidCatch حتى تمنع إعادة عمل rerendering

لذلك تقوم react بتوليد هذا الخطأ 

أعتقد أن من بعد الإصدار 16 لا يظهر هذا الخطأ من الأساس

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

وأيضا يمكنك إستخدام UseEffect  اللذي هو بمتابة hook React المكافئ لـ componentDidMount.

يمكن كتابة الكود على الشكل التالي.

import { useEffect } from 'react';
import { navigate } from 'gatsby';

export default () => {
  useEffect(() => {
    navigate('/posts/');
  }, []);
  return null;
};

و سيتم تحويل المستخدم إلى الصفحة  posts/

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

يمكنك استخدام navigate من gatsby 

import { useEffect } from 'react';
import { navigate } from 'gatsby';

export default () => {
  useEffect(() => {
    navigate('/posts/',   { replace: true });
  }, []);
  return null;
};

إذا كان يجب أن يحل route محل history بدلاً من دفع إدخال جديد في route history ، فقم بإضافة خاصية replace بقيمة true إلى وسيطة خيارات التنقل.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...