از بین رفتن اطلاعات هنگام رفرش صفحه یا navigate کردن
سلام
من یه تازه کار هستم توی ری اکت .
من یه سری اطلاعات رو از طریق LINK توی REACT-ROUTER میفرستم به یه کامپوننت دیگه
و اطلاعات درست نمایش داده میشن ولی وقتی صفحه رفرش میشه یا یه صفحه میری جلوتر و برمیگردی این اطلاعات که با لینک فرستاده شده از بین میرن
و باید برگردی صفحه اول و دوباره کلیک کنی تا اطلاعات فرستاده بشن و هدایت بشی به کامپوننت بعدی
کد ارسال دیتا با کلیک
<Link to={{
pathname: `/article/${detail.slug}`,
query: detail,
}}>
{detail.title} </Link>
</Item.Header>این دیتارو توی صفحه دیگه ای با
this.props.location.queryاستفاده میکنم که با رفرش این کلا از بین میره سعی کردم با ری اکت کوکی هم سیوش کنم ولی همه چی خراب تر شد
و نمیدونم چیکار کنم این دیتا موقع رفرش نپره
یا اگر باید از ری اکت کوکی استفاده کنم توی کدوم کامپوننت باید این اطلاعات رو سیو کنم و ..
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
کلا درست متوجه نشدم که توی صفحه جدید چه دیتایی می خوای بگیری اما چون گفتی وبلاگه فرض رو بر این میزارم که دیتای یه مقاله رو می خوای از api بگیری :
ببین تو اول باید یه روتر تعریف کنی و توی path اون یه ID ست کنی مثلا :
path="/blog/posts/:id"اینجوری میتونی یه کامپوننت یا صفحه دزست که که توی اون با
this.props.match.params.idمیتونی اون ID رو بگیری حالا مثلا این ID اون مقاله هست که می خوای نشون بدی توی صفحه یه ریکوئست میزنی به API که مقاله با این id رو بگیری .
کاری که لینک انجام میده هم اینکه فقط آی دی مقاله رو به url اضافه میکنه :
<Link to={${/blog/posts/${postID}} > ادامه مقاله</Link>این که خیلی طبیعیه دیتایی که از یه کامپوننت دیگه میاد با رفرش از بین میره
این دیتایی که میفرستی چی هست اصن و چه لزومی داره اینجوری فرستاده بشه ؟!
ببین این یه سیستم بلاگ هستش
و یه لیستی از مقالات دارم که توی صفحه اول لودش کردم
وقتی کلیک میکنم این اطلاعات پست رو هم میفرستم تو صفحه بعد
که با رفرش میپره دنبال یه راهی بودم این انجام نشه
اطلاعات رو با json-server شبیه api کردم و با axios گرفتمشون
اصلا چیزی که من میخوام امکان داره ؟
سلام .
شما میتونید از redux برای ارسال اطلاعاتتون به یک state سراسری که در همه جای اپ داشته باشید و با نویگیت کردن هم اون اطلاعات در دسترستون باشه استفاده کنید . منتها اگر زمان کافی برای یادگیری اون ندارید میتونید از localStorage و یا sessionStorage استفاده کنید . البته پیشنهاد میکنم از session استفاده کنید بهتر هستش برای این مورد مگر اینکه شما بخواهید موردی رو ذخیره نگه داری که در اون صورت از localStorage استفاده کنید.ی چیزی شبیه کد زیر میشه :
localStorage.setItem( 'localStorageName' , JSON.stringify([{},{}]));
let getLocalStorageLogin = localStorage.getItem('localStorageName');
let localStorageLogin = getLocalStorageLogin ? JSON.parse(getLocalStorageLogin) : [];استفاده از State سراسری فکر خوبیه اما با این کار باز هم با رفرش صفحه دیتا از بین میره این که بخوای اطلاعاتی مثل مقالات وبلاگ رو توی LocalStorage ذخیره کنی اصلا کار درستی نیست و اصلا برای این کار ساخته نشده . پیشنهاد من اینه که با استفاده از router ها ارسال param استفاده کنی ولی قبلا باید بدونم که دیتا رو از کجا و چجوری میگیری ؟ از API ؟
سلام مرسی از پاسختون
دیتارو خودم یه فایل جیسون ساختم و با json-server یه api الکی درست کردم
بااستفاده از لینک میفرستمشون صفحه بعد
اونجا هم استفاده میکنم ولی خب با رفرش میپره .
توی سوال اولم کدش رو گزاشتم که چطوری با لینک فرستادم .
کلا درست متوجه نشدم که توی صفحه جدید چه دیتایی می خوای بگیری اما چون گفتی وبلاگه فرض رو بر این میزارم که دیتای یه مقاله رو می خوای از api بگیری :
ببین تو اول باید یه روتر تعریف کنی و توی path اون یه ID ست کنی مثلا :
path="/blog/posts/:id"اینجوری میتونی یه کامپوننت یا صفحه دزست که که توی اون با
this.props.match.params.idمیتونی اون ID رو بگیری حالا مثلا این ID اون مقاله هست که می خوای نشون بدی توی صفحه یه ریکوئست میزنی به API که مقاله با این id رو بگیری .
کاری که لینک انجام میده هم اینکه فقط آی دی مقاله رو به url اضافه میکنه :
<Link to={${/blog/posts/${postID}} > ادامه مقاله</Link>