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

Adam Ebrahim · 12 مايو 2021

أحاول أن أقوم بعمل مدونة وأريد أن يتم تحويل المستخدم من الصفحة الرئيسية / إلى صفحة /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

عبدالباسط ابراهيم · 12 مايو 2021

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

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

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

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

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

محمد أيت لعرايك · 12 مايو 2021

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

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

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

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

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

Salah Eddin Beriani2 · 13 مايو 2021

يمكنك استخدام 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 إلى وسيطة خيارات التنقل.

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

السؤال

Adam Ebrahim

3 أجوبة على هذا السؤال

Recommended Posts

عبدالباسط ابراهيم

محمد أيت لعرايك

Salah Eddin Beriani2

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية