React ile 404 Sayfası Route Etmek

 Bu yazıda sizlere React ile nasıl route edilmeyen linkleri 404 sayfasına yönlendirmeyi anlatmaya çalışacağım. Öncelikle nedir bu 404 sayfası.

Route işlemlerinizi yaptınız ama kullanıcı gidip ww.domain.com/yansekiz girdi boş bir sayfa göstermek yerine bu sayfa bulunamadı tarzında bir yazı göstermek için 404 sayfasını kullanıyoruz.

Peki bunu nasıl yapıcaz ?

 

Yukarıdaki resimde gördüğünüz gibi bir Switch component'ı kullandım.

Switch nedir ? Ne işe yarar?

React Switch gördüğünde Route'lara ilerler eğer aradığı path eşleşiyorsa durur ve o yolda devam eder. Fakat bir eşleşme olmazsa NotFoundPage'e kadar gider ve bize 404 döndürür.

NOT : BrowserRouter, Swith , Route import için 

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

 Kullanmalısınız!

 

Tüm kod :

 

import React from "react";

import ReactDOM from "react-dom";

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

 

const ExpenseDashboardPage = () => (

  <div>This is from my dashboard component</div>

);

const addExpensePage = () => (

    <div>This is from my add expanse component</div>

  );

const helpPage = () => (

    <div>This is from my help component</div>

);

const editPage = () => (

    <div>This is from my edit component</div>

);

const NotFoundPage = () => (

    <div>404!</div>

);

const routes = (

  <BrowserRouter>

    <Switch>

      <Route path="/" component={ExpenseDashboardPage} exact={true}></Route>

      <Route path ="/create" component={addExpensePage} exact={true}></Route>

      <Route path ="/edit" component={editPage} exact={true}></Route>

      <Route path ="/help" component={helpPage} exact={true}></Route>

      <Route component={NotFoundPage}></Route>

    </Switch>

  </BrowserRouter>

);

ReactDOM.render(routes, document.getElementById("app"));