https://virgool.ir/feed/@behzad.haتوسعه نرم افزار و کد نویسی دقیقا مثل تولید یک محصول فیزیکی سخت و پر برکت هست.fa2026-11-11 00:11:14https://files.virgool.ir/upload/users/1609291/avatar/QT6sS9.jpeghttps://virgool.ir/@behzad.hahttps://virgool.ir/@behzad.ha/هشتگ-hash-tag-در-nextjs-qtsmsqzaqjutاضافه کردن و خواند هشتگ در Next.js در ورژن های 13 به بالا که زمانی که از App Router استفاده میشه کمی چالش برانگیز هست.از روش زیر میشه این موضوع را مدیریت کرد.میتونم یک هوک تعریف کنیم که قابل استفاده در تمام پروژه باشه و نتیجه هوک میشه هشتگ مورد نظر.'use client' import { useParams } from 'next/navigation' import { useEffect, useState } from 'react' const getHash = () => typeof window !== 'undefined' ? .hash : '' const useHash = () => { const [isClient, setIsClient] = useState(false) const [hash, setHash] = useState<string>(getHash()) const params = useParams() useEffect(() => { setIsClient(true) setHash(getHash()) }, [params]) return isClient ? hash : '' } export default useHashنحوه استفاده:'use client' import useHash from './useHash' const HashDisplay = () => { const hash = useHash() return ( <div> <h2>Current Hash:</h2> {hash ? ( <p>{hash}</p> ) : ( <p>No hash present in the URL</p> )} </div> ) } export default HashDisplayبهزاد حاجی احمدیبهزاد حاجی احمدیTue, 17 Sep 2024 10:46:24 +0330https://virgool.ir/@behzad.ha/react-router-v6-ew5qtt6mdd3rسلام همکار عزیز :)در ورژن 5 React Router برای تعریف Route های تو در تو یا nested، داخل یکی از کامپوننت ها موجود، به شکل زیر بوده:فرض بر این هست که کامپوننت اصلی App هست و یک کامپوننت دیگه داریم به نام User که قرار هست در اون Nested Route داشته باشیم// This is a React Router v5 app import { BrowserRouter, Switch, Route, Link, useRouteMatch, } from "react-router-dom" function App() { return ( <BrowserRouter> <Switch> <Route exact path="/"> <Home /> </Route> <Route path="/users"> <Users /> </Route> </Switch> </BrowserRouter> ); } function Users() { // در ورژن 5 روت های تو در تو توسط فرزند رندر میشد برای همین // مجبورا از سوییچ در تمام روت ها استفاده میشد و // از match.url and match.path باید استفاده مشد let match = useRouteMatch(); return ( <div> <nav> <Link to={`${match.url}/me`}>My Profile</Link> </nav> <Switch> <Route path={`${match.path}/me`}> <OwnUserProfile /> </Route> <Route path={`${match.path}/:id`}> <UserProfile /> </Route> </Switch> </div> ); }و خداروشکر الان در ورژن 6 خیلی این موضوع بهبود یافته و به شکل زیر شده:// This is a React Router v6 app import { BrowserRouter, Routes, Route, Link, } from "react-router-dom" function App() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="users/*" element={<Users />} /> </Routes> </BrowserRouter> ); } function Users() { return ( <div> <nav> <Link to="me">My Profile</Link> </nav> <Routes> <Route path=":id" element={<UserProfile />} /> <Route path="me" element={<OwnUserProfile />} /> </Routes> </div> ); }امیدوارم که مطلب کمکتون کرده باشه.موفق باشیدبهزاد حاجی احمدیبهزاد حاجی احمدیMon, 27 Jun 2022 19:49:05 +0430