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

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

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

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

را

ایجاد صفحه 404

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

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

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

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 404 یک پیام و پیوندهایی برای هدایت کاربر به صفحات رایج در وب سایت ارائه می دهد.

مسیریابی به صفحه 404

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

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

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

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

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

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

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

مسیریابی در React

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

منبع مقاله