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

اخفاء مكونات في صفحات معينة react router

Rayden Storm

السؤال

لدي قمت بتجهيز مكون app ليعمل بهذه الطريقة

import React, { useState, useEffect } from 'react';
import { Switch, Route, Link, HashRouter } from 'react-router-dom';


import routes from './routes/userRoutes';
import Navbar from './pages/layout/Navbar';
import Footer from './pages/layout/Footer';

export default function App() {
  console.log(routes);
  return (
    <HashRouter>
      <Navbar></Navbar>
      <Switch>
        {routes.map((route) => (
          <Route {...route}></Route>
        ))}
      </Switch>
      <Footer></Footer>
    </HashRouter>
  );
}

و لدي مشكلة حيث انه اعلم انه في المستقبل سانشئ صفحات لا تحتوي على navabar و footer وأتساءل عن الطريقة الصحيحة للوصول لذلك من الأن ليكون كل شئ منظم من البداية 

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

Recommended Posts

  • 0

يمكن وضع شرط في بنية المكون تختبر المسار و عليه تقرر إما تظهر المكون أو تخفيه..

import { withRouter } from 'react-router-dom';    
const ComponentToHide = (props) => {
  const { location } = props;
  // نعيد قيمة فارغة إن لم نرد عرض المكون لهذا المسار
  // route-path المسار الذي نريد إخفاء المكون فيه
  if (location.pathname.match(/route-path/)){
    return null;
  }

  return (
    <ComponentToHideContent/>
  )
}

const ComponentThatHides = withRouter(ComponentToHide);

حيث نستطيع معرفة الرابط من خلال location ووضع شرط مناسب

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...