سلام
من یه تازه کار هستم توی ری اکت .
من یه سری اطلاعات رو از طریق 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>
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟