ورود ثبت نام
دوره های مخصوص اعضای ویژه مخصوص اعضای ویژه
تخفیف های عید قربان تا عید غدیر

کارنکردن بعضی از css ها و js

لینک کوتاه https://toplearn.com/q/67101

  • 1401/05/01

کارنکردن بعضی از css ها و js :

سلام استاد وقتتون بخیر , استاد من با کمک دوروه شما یک پروژه ای رو شروع کردم مشکلم اینکه وقتی با استفاده Link یا Navlink با استفاده از کتابخانه react-router-dom وارد یک صفحه میشم بعضی از جاوااسکریپت ها و استایل ها از کار می افتند درصورتی که صفحه رفرش میشه مشکل برطرف می شود ووقتی هم با اسفتاده از تگ <a> به یک صفحه وارد مشکلی به وجود نمیاد . استاد ممنون میشم اگه راهنمایی کنید خیلی سرچ کردم دربارش , دوستان اگه کسی قبلا به این مشکل برخورده خوشحال میشم راهنماییم کنه 

    <link rel="stylesheet" href="/css/home-style.css">
    <script  src="/js/main.js"></script>

این یه نمونه از مسیردهی های پروژست که داخل فایل index.html مسیر دهی شدن

Saeedhajizad

Saeedhajizad

samankeighobadi سامان کیقبادی
  • 1401/05/01
  • ساعت 18:45

سلام دوست عزیز 

معمولا این عدم لود شدن ها به خاطر مشکل در مسیر دهی هست

این روش در لینک زیر هست رو تست کنید اگر اوکی نشد از نحوه ست کردن react router dom و Link عکس قرار بدین تا استاد و بقیه دوستان  راهنماییتون کنن

https://stackoverflow.com/questions/67379219/css-not-working-for-nested-routing-in-react-js


prixy یونس قربانی
  • 1401/05/02
  • ساعت 18:22

سلام دوست من

اگر در index.html در قسمت هایی که موارد link شدن آدرس رو تغییر بدی و / اولی رو پاک کنی مشکل برطرف میشه ؟

به این صورت

  <link rel="stylesheet" href="css/home-style.css">
    <script  src="js/main.js"></script>

Saeedhajizad Saeedhajizad
  • 1401/05/03
  • ساعت 12:40

خیر استاد با تغییر این قسمت هم مشکل برطرف نمیشه مشکلات دیگه ای هم به وجود میاد.

استاد  امکانش هست که از مسیر دهی که به کامپوننت ها داده شده باشه که با react-router-dom انجام میشه؟ 


prixy یونس قربانی
  • 1401/05/05
  • ساعت 00:46

لینکی که دوست عزیزمون سامان جان قرار دادن کمکت نکرد ؟

کدهایی که برای مسیردهی نوشتی رو قرار بده ببینم


Saeedhajizad Saeedhajizad
  • 1401/05/09
  • ساعت 15:59

بفرمایید استاد

این پروژه با نسخه 17 react js و نسخه 5 react-router-dom ایجاد شده

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#000000">

    <!-- plugin-------------------------------------->
    <!-- font---------------------------------------->
    <link rel="stylesheet" href="/css/vendor/font-awesome.min.css" />
    <link rel="stylesheet" href="/css/vendor/materialdesignicons.css" />
    <link rel="stylesheet" href="/css/vendor/owl.carousel.min.css" />
    <link rel="stylesheet" href="/css/vendor/noUISlider.min.css" />
    <link rel="stylesheet" href="/css/vendor/bootstrap-slider.min.css" />
    <link rel="stylesheet" href="/css/vendor/lightgallery.css" />
    <link rel="stylesheet" href="/css/vendor/nice-select.css" />
    <link rel="stylesheet" href="/css/vendor/jquery.jqZoom.css" />
    <link rel="stylesheet" href="/css/ReactToastify.css" />
    <link rel="stylesheet" href="/css/dialogStyle.css" />
    <!-- main-style-------------------------------- -->
    <link rel="stylesheet" href="/css/vendor/bootstrap.css" />
    <link rel="stylesheet" href="/css/adminDashboard.css" />


    <link rel="stylesheet" href="/css/home-style.css" />
    <link rel="stylesheet" href="/css/home-respnsive.css" />
    <!-- <style id="theia-sticky-sidebar-stylesheet-TSS">
        .theiaStickySidebar:after {
            content: "";
            display: table;
            clear: both;
        }
    </style> -->
</head>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">
    </div>
    <!-- scroll_Progress------------------------->
    <div class="progress-wrap">
        <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
            <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
        </svg>
    </div>
    <!-- scroll_Progress------------------------->


</body>
<!-- plugin----------------------------------------------------->
<script src="/js/vendor/jquery-3.2.1.min.js"></script>
<script src="/js/vendor/bootstrap.js"></script>
<script src="/js/vendor/owl.carousel.min.js"></script>
<script src="/js/vendor/countdown.min.js"></script>
<script src="/js/vendor/ResizeSensor.min.js"></script>
<script src="/js/vendor/theia-sticky-sidebar.min.js"></script>
<script src="/js/vendor/wNumb.js"></script>
<script src="/js/vendor/nouislider.min.js"></script>
<script src="/js/vendor/bootstrap-slider.min.js"></script>
<script src="/js/vendor/lightgallery-all.js"></script>
<script src="/js/vendor/jquery.ez-plus.js"></script>
<script src="/js/vendor/jquery.nice-select.min.js"></script>
<script src="/js/vendor/jquery.jqZoom.js"></script>


<!-- main js---------------------------------------------------->
<!-- <script src="/js/adminDashboard.js"></script> -->
<script src="/js/main.js"></script><script src="/js/home.js"></script>
<!-- END PAGE JAVASCRIPT -->

</html>

این صفحه index.html من هستش 

 <Route path={["/", "/ArchiveProducts"]}>
   <MainLayout>
      <Switch>
 
        
        <Route path="/ArchiveProducts/Searched/products/:title" 
        component={ArchiveOfSearchedProducts}>
        </Route>
        
        <Route path="/ArchiveProducts/Searched/Group/:title" 
        component={SearchForGroupProducts}>
        </Route>
        
        <Route path="/ArchiveProducts" exact component={ArchiveProducts}></Route>
        
        <Route path="/SubmitComment/:id" component={SubmitComment}></Route>
        
        <Route path="/Product/:title" 
        render={() => <SingleProduct setLoading={setLoading} loading={loading} />}>
        </Route>
        
        <Route path="/NotFountPage" component={NotFountPage}></Route>
        
        <Route path="/Contact-Us" component={ContactUs}></Route>
        
        <Route path="/" exact 
        render={() => <ProductContext Allproduct={products}
         productGroups={productGroups}>
       <Product products={products} productGroups={productGroups} />
       </ProductContext>}>
       </Route>
      </Switch>
     </MainLayout>
    
    </Route>

این همه نمونه ای پیکربندی کامپوننت ها توسط react-router-dom .

 


prixy یونس قربانی
  • 1401/05/12
  • ساعت 14:15

اگر مسیر هارو جدا کنی و از 

 <Route path={["/", "/ArchiveProducts"]}>\

استفاده نکنی فکر کنم درست بشه

در همین کد بالا در آرایه اول /ArchiveProducts رو بنویس و بعد / ببین درست میشه

اگر نشد به جای استفاده از این روش باید جدا جدا مسیردهی کنی

تنها MainLayout داری ؟


Saeedhajizad Saeedhajizad
  • 1401/05/15
  • ساعت 03:09
 <Switch>
    <Route path={"/ArchiveProducts"}>
      <MainLayout>
        <Route path="/ArchiveProducts/Searched/products/:title"
         component={ArchiveOfSearchedProducts}>
        </Route>
        
        <Route path="/ArchiveProducts/Searched/Group/:title"
         component={SearchForGroupProducts}>
        </Route>
        
        <Route path="/ArchiveProducts" exact
        component={ArchiveProducts}>
        </Route>
        
      </MainLayout>
     </Route>

     <Route path={"/"} >
       <MainLayout>

         <Route path="/UserCart" component={UserCart} >

         </Route>

         
         <Route path="/CheckOut/Payment" 
         render={() => !isEmpty(user) ? (<Payment></Payment>) : (<NotFountPage />)} >
         </Route>
         
         <Route path="/CheckOut" 
         render={() => !isEmpty(user) ? (<CheckOut></CheckOut>) : (<NotFountPage />)} >
         </Route>
         
         <Route path="/OnlinePaymentResult/:id" 
         render={() => !isEmpty(user)?(<OnlinePaymentResult />):(<NotFountPage/>)} >
         </Route>
         
         <Route path="/Transaction/Detail/:id" 
         render={() =>!isEmpty(user)?(<TransactionDetails />):(<NotFountPage />)}>
         </Route>
         
         <Route path="/SubmitComment/:id" component={SubmitComment}>
         </Route>
         
         <Route path="/Product/:title" 
         render={() =><SingleProduct setLoading={setLoading} loading={loading}/>}>
         </Route>
         
          <Route path="/NotFountPage" component={NotFountPage}></Route>
          
          <Route path="/Contact-Us" component={ContactUs}></Route>
          
          <Route path="/" exact 
          render={()=>
          <ProductContext 
          Allproduct={products} productGroups={productGroups}>
          <Product products={products} productGroups={productGroups} />
          </ProductContext>}>
          </Route>


        </MainLayout>
       </Route>
  
     
           </Switch>

استاد من مسیر هارو به این شکل جدا کردم اما مشکل کامل رفع نشد.!

خیر استاد 3 تا layout دیگه هم وجود داره.


prixy یونس قربانی
  • 1401/05/16
  • ساعت 01:07

از اونجایی که گفتی کامل رفع نشده پس پیشرفتی داشتی درسته ؟

مشکل در همین مسیردهی هست 

در مستندات خود rrd باید در مورد layout صحبت شده باشه 

فوقش ورژن جدید رو نصب کن و طبق مستندات خودش پیش برو ببین چطور میشه


Enamad ساماندهی