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

السؤال

نشر

أحاول إستعمال مكتبة React-router لإضافة ميزة التنقل بين الصفحات في أحد مشاريع React.js ولكن عندما قمت بإنشاء بعض المسارات Routes ظهر لي الخطأ التالي:

Error: A Route is only ever to be used as the child of element, never rendered directly. Please wrap your Route in a Routes.

لم أفهم سبب الخطأ، وما معني "wrap your Route in a Routes" 

هنا الكود الخاص بي:

import { Route } from "react-router-dom";

function App() {
    return (
        <div>
            <Route path = "/">
              <div>Home Page</div>
            </Route>
            <Route path = "/about">
                <div>About Us Page</div>
            </Route>
        </div>
    );
}

export default App;

وقمت بالتأكد من إضافة BrowserRouter إلى المشروع:

import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from "./App";

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root')
);

 

Recommended Posts

  • 1
نشر

أنت تضع مكون أو أكثر من Route ضمن عنصر div بشكل أولاد مباشرين له، وهنا الخطأ، حيث أن المسار لا يتم عمل render له مباشرة، بل يجب أن يكون ابن لعنصر Routes

function App() {
    return (
        <div>
          <Routes>
            <Route path = "/">
              <div>Home Page</div>
            </Route>
            <Route path = "/about">
                <div>About Us Page</div>
            </Route>
          </Routes>
        </div>
    );
}

 

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...