Yanlış Adres (404)

Link ve Route componentlerinin ilişkilerini daha önceki konularda çokça ele aldık. Kısaca tekrarlamak gerekirse Link componenti URL’i güncellerken, Route componenti URL’e göre ekrana component basacaktır. Peki ya linkteki URL, herhangi bir Route componenti ile eşleşmiyorsa? Bu durumda path attribute’ü yazılmamış bir Route componenti işimizi görecektir.

İlk olarak kullanacağımız react ve react-router-dom componentlerini sayfaya dahil edelim.

import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  Redirect
} from "react-router-dom";

Ardından componentimizi oluşturalım.

const NoMatchExample = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/old-match">Old Match, to be redirected</Link>
        </li>
        <li>
          <Link to="/will-match">Will Match</Link>
        </li>
        <li>
          <Link to="/will-not-match">Will Not Match</Link>
        </li>
        <li>
          <Link to="/also/will/not/match">Also Will Not Match</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/" exact component={Home} />
        <Redirect from="/old-match" to="/will-match" />
        <Route path="/will-match" component={WillMatch} />
        <Route component={NoMatch} />
      </Switch>
    </div>
  </Router>
);

Yukarıdaki kodu biraz inceleyelim. Link, Switch, Route ve Redirect componentleri kullanılmış. Bu componentler ile alakalı anlamadığınız bir nokta varsa ilgili linklere giderek dokümanı tekrardan okuyabilirsiniz.

• Link

• Switch

• Route

• Redirect

Dikkat ederseniz 2. Link componentinin set ettiği URL /old-math fakat Redirect componenti ile bu linke gelindiğinde linki /will-match olarak güncelliyoruz. / ve /will-math URL’leri ile eşleşildiğinde ilgili componentler ekrana yazdırılacaktır.

/will-not-match ve /also/will/not/match URL’leri ile eşleşen bir Route olmadağı için Route={NoMatch} render edilerek NoMatch componenti ekrana yazdırılacaktır.

const Home = () => <h3>Ana Sayfa</h3>;

const WillMatch = () => <h3>Eşleşti!</h3>;

const NoMatch = ({ location }) => (
  <div>
    <h3>
      {location.pathname} linki ile eşleşen bir component bulunamadı.
    </h3>
  </div>
);

export default NoMatchExample;

Kendi dokümanı üzerinden kodu inceleyebilir ve nasıl çalıştığını test edebilirsiniz.

Sıradaki Eğitim: Scroll Sorunun Çözümü