كيف أتصفح المشروع من خلال الهاتف

العنوان localhost الذي تستخدمه ذلك خاص بالخادم المحلي على حاسوبك أي من الجهاز الذي يعمل عليه الخادم الخاص بالمشروع، بينما لو أردت تصفحه من الهاتف، ستجد عنوان مختلف للوصول للمشروع عبر الشبكة لديك، ابحث في منفذ الأوامر لديك عن رقم IP يبدأ بـ 192 ثم قم بكتابته كما هو في المتصفح لديك في الهاتف لعرض المشروع 

لم افهم ماتقصده كيف يمكن فتح منفذ الاوامر من خلال الهاتف

ليس من خلال الهاتف، بل توجه للحاسوب الخاص بك وقم بتشغيل المشروع، وسيظهر لك عنوان ip في منفذ الأوامر استخدمه لتصفح المشروع من خلال الهاتف، وأبقي الخادم يعمل على الحاسوب

لقد شغلت المشروع ولم اره شيئ اسمه ip

قم بتشغيل المشروع من خلال الأمر:

npm run dev -- --host

تم حل مشكلة شكرا لك لكن ظهرت مشكلة اخرة لقد رفعت المشروع وفتحت المشروع من خلال الهاتف وعند ضغط على اي رابط يظهر نفس الخطأ 

هذه هو رابط المشروع بعد رفعه https://inspiring-gingersnap-c140fc.netlify.app/

بتاريخ On 1‏/7‏/2025 at 17:29 قال Hxfhf Ucicic:

تم حل مشكلة شكرا لك لكن ظهرت مشكلة اخرة لقد رفعت المشروع وفتحت المشروع من خلال الهاتف وعند ضغط على اي رابط يظهر نفس الخطأ 

هذه هو رابط المشروع بعد رفعه https://inspiring-gingersnap-c140fc.netlify.app/

المشكلة لديك في ملف src\Components\Navbar\Navbar.jsx في جزء ال ul حيث لاحظ أنك تستخدم عنصر a مع href يحوي رابط localhost:5173 ولكن الصحيح هو جعل الرابط نسبي أى من الموقع الحالي المفتوح .

لذلك يرجى إستبدال من سطر 13 حتى 16 بالتالي :

<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/services">Services</Link></li>
<li><Link to="/contact">Contact</Link></li>

وإستيراد link في بداية الملف كالتالي :

import { Link } from 'react-router-dom';

ليصبح كود الملف كالتالي :

import React from 'react'
import './Navbar.css';
import logo from '../../assets/logo.png'
import { Link } from 'react-router-dom';
const Navbar = () => {
  return (
    <div>
      <div className="navbar">
        <div className="logo">
          <img src={logo} alt="" />
        </div>
        <div className="nav-list">
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/services">Services</Link></li>
            <li><Link to="/contact">Contact</Link></li>
          </ul>
        </div>
      </div>
    </div>
  )
}

export default Navbar