نحوه ایجاد یک صفحه ۴۰۴ در React با استفاده از روتر React

یک صفحه سفارشی ۴۰۴ با استفاده از یک مسیر ساده React ایجاد کنید تا به بازدیدکنندگان خود در زمانی که بیشتر به آن نیاز دارند کمک کنید.

دیر یا زود، کاربر از آدرس اینترنتی که در وب سایت شما وجود ندارد بازدید می کند. اینکه کاربر بعد از این چه کاری انجام دهد به شما بستگی دارد. آنها ممکن است دکمه بازگشت را فشار دهند و سایت شما را ترک کنند. درعوض، می توانید یک صفحه مفید ۴۰۴ برای کمک به آنها برای ادامه مسیر به وب سایت خود ارائه دهید.

برای وب‌سایت‌های React، می‌توانید از روتر React برای ایجاد یک صفحه مفید ۴۰۴ استفاده کنید که یافت نشد که در هنگام بازدید کاربر از مسیری که وجود ندارد، رندر می‌شود.

را

ایجاد صفحه ۴۰۴

خطای ۴۰۴ زمانی رخ می دهد که می خواهید از صفحه ای در وب سایت بازدید کنید که سرور نمی تواند آن را پیدا کند. به عنوان یک توسعه دهنده، مدیریت خطاهای ۴۰۴ به معنای ایجاد صفحه ای است که سرور زمانی که نمی تواند صفحه درخواستی را پیدا کند، به عنوان جایگزین استفاده می کند.

این مقاله فرض می‌کند که شما قبلاً یک برنامه React در حال کار با راه‌اندازی مسیریابی دارید. اگر این کار را نکردید، یک برنامه React ایجاد کنید و React Router را نصب کنید.

یک فایل جدید به نام NotFound.js ایجاد کنید و کد زیر را برای ایجاد صفحه ۴۰۴ اضافه کنید.

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

export default function NotFound() {
    return (
        <div>
            <h1>Oops! You seem to be lost.</h1>
            <p>Here are some helpful links:</p>
            <Link to='/'>Home</Link>
            <Link to='/blog'>Blog</Link>
            <Link to='/contact'>Contact</Link>
        </div>
    )
}

این صفحه React ۴۰۴ یک پیام و پیوندهایی برای هدایت کاربر به صفحات رایج در وب سایت ارائه می دهد.

مسیریابی به صفحه ۴۰۴

شما مسیرها را با استفاده از روتر React با تعیین مسیر URL و مؤلفه‌ای که می‌خواهید برای آن مسیر رندر کنید، مشخص می‌کنید.

برای مثال، در زیر مسیری وجود دارد که مؤلفه Home را ارائه می‌کند.

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

function App() {
    return (
        <Routes>
            <Route path="/" element={ <Home/> }/>
        </Routes>
    )
}

صفحه خطای ۴۰۴ مسیرهایی را نشان می دهد که در وب سایت وجود ندارند. بنابراین، به جای تعیین مسیر، از یک ستاره (*) برای مطابقت با هر چیزی استفاده کنید.

<Route path='*' element={<NotFound />}/>

مؤلفه NotFound برای همه URL هایی که در مسیرها مشخص نشده اند، ارائه می شود.

مسیریابی در React

مرورگرها یک صفحه پیش‌فرض ۴۰۴ دارند، اما ایجاد یک صفحه سفارشی به شما این امکان را می‌دهد که به کاربران خود بگویید چه مشکلی رخ داده و چگونه می‌توانند آن را برطرف کنند. شما به راحتی می توانید یک صفحه React ۴۰۴ برای همه URL هایی که در برنامه وب شما وجود ندارند با استفاده از یک react-router-dom ایجاد کنید. شما همچنین می توانید آن را با توجه به برند خود سبک کنید.

منبع مقاله