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

السؤال

نشر (معدل)
     path:'',element:<layout/>, children:[

        {path:true, element:<home/>}

        {path:true, element:<navbar/>}  

        {path:true, element:<login/>}

        {path:true, element:<register/>}  

        {path:true, element:<movies/>}

        {path:true, element:<layout/>}

        {path:true, element:<footer/>}

        {path:"*", element: <notfound/>}



     ]          

    return (

    <>

    <routerprovider router=(routes)></routerprovider>  

    </>

   

 );

export default app;

 

تم التعديل في بواسطة Mustafa Suleiman
تعديل عنوان السؤال

Recommended Posts

  • 0
نشر

هناك عدة أخطاء في الكود، وإليك الكود بعد التعديل:

import React from 'react';
import { RouterProvider } from 'react-router-dom';
import Layout from './Layout';
import Home from './Home';
import Navbar from './Navbar';
import Login from './Login';
import Register from './Register';
import Movies from './Movies';
import Footer from './Footer';
import NotFound from './NotFound';

const routes = [
  { path: '', element: <Layout />, children: [
    { path: '/', element: <Home /> },
    { path: '/navbar', element: <Navbar /> },
    { path: '/login', element: <Login /> },
    { path: '/register', element: <Register /> },
    { path: '/movies', element: <Movies /> },
    { path: '/footer', element: <Footer /> },
    { path: '*', element: <NotFound /> }
  ]}
];

const App = () => {
  return (
    <>
      <RouterProvider router={routes} />
    </>
  );
}

export default App;

اولاً قمت باستيراد المكونات اللازمة بشكل صحيح من خلال استخدام عبارة import، ولاحظ أنه يجب استيراد كل مكون منفصل عن طريق تحديد المسار الصحيح لكل ملف.

وتحديد أسماء المكونات بشكل صحيح وفقًا للاستيراد الصحيح لكل مكون.

وانتبه إلى أنه تم استخدام علامة زوجية غير صحيحة <layout/>، والعلامة الزوجية الصحيحة هي <Layout />، وذلك بتحديد الحرف الأول كبيرًا للتأكيد على أنها مكون.

ثم قمت بتحديد الخصائص الصحيحة لكل مسار في الكائن routes، باستخدام خاصية path لتحديد العنوان المرتبط بكل مكون، وخاصية element لتعيين المكون المرتبط بهذا العنوان.

وفي النهاية تعديل عنوان التصدير النهائي للتطبيق من app إلى App ليتم توافقه مع الاستيراد في الملف الرئيسي الآخر.

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...