React Yönlendirici Kancaları

Yönlendirme için neden Hook'ların eklendiğini anladığınıza göre, şimdi Hook'ları çalışırken görelim.

useParams

Hook , useParamsdinamik bir URL'de geçirilen parametrelerin anahtar/değer çiftlerini içeren bir nesne döndürür.

Örneğin, URL'de a parametresini Userkabul eden bir sayfa bileşeniniz olduğunu varsayalım.id

<Route path="/user/:id">
  <User />
</Route>

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

const User = () => {
  const params = useParams();
console.log(params);
return (
    // ...
  )
}

{
  id: 3,
}

import {
  // ...
  useParams,
} from "react-router-dom";
// /user/:id
const User = () => {
  const params = useParams();
return (
    <div>
      <div>This is the user page</div>
      <div>current user Id - {params.id}</div>
    </div>
  );
};

Kancalar , yönlendiricinin rota değişikliklerini işlemek için dahili olarak kullandığı nesneyi useHistorydöndürür . historyNesne history, oturum geçmişini yönetmek için kullanılır.

Örneğin, history.push()geçmiş yığınına yeni bir giriş eklemek ve kullanıcıyı mevcut rotadan yönlendirmek için yöntemi kullanabilirsiniz:

import {
  // ...
  useHistory,
} from "react-router-dom";
const User = () => {
  const history = useHistory();
  const params = useParams();
const handleBack = () => {
    history.goBack();
  };
const handleNavigation = () => {
    history.push("/user/5");
  };
return (
    <div>
      <div>This is the user page</div>
      <div>current user Id - {params.id}</div>
      <div>
        <button onClick={handleBack}>Go Back</button>
      </div>
      <div>
        <button onClick={handleNavigation}>Go To Different User</button>
      </div>
    </div>
  );
};

useLocation

Kanca , etkin URL'yi temsil eden nesneye erişmenizi useLocationsağlar . Kullanıcı yeni bir URL'ye gittiğinde nesnenin locationdeğeri değişir. Kanca, URL değiştiğinde herhangi bir olayı tetiklemeniz gerektiğinde kullanışlı olabilir .location
useLocation

Kullanıcıların profil sayfalarındaki görünümleri takip etmeniz gerektiğini düşünün. React ile birlikte gelen Hook'u locationkullanarak nesnedeki değişiklikleri tespit edebilirsiniz .useEffect

import {
  // ...
  useLocation,
} from "react-router-dom";
const User = () => {
  const history = useHistory();
  const params = useParams();
  const location = useLocation();
useEffect(() => {
    console.log(location.pathname);
    // Send request to your server to increment page view count
  }, [location]);
const handleBack = () => {
    history.goBack();
  };
const handleNavigation = () => {
    history.push("/user/5");
  };
return (
    <div>
      <div>This is the user page</div>
      <div>current user Id - {params.id}</div>
      <div>
        <button onClick={handleBack}>Go Back</button>
      </div>
      <div>
        <button onClick={handleNavigation}>Go To Different User</button>
      </div>
    </div>
  );
};

Hook, bileşenin useRouteMatchnasıl çalıştığına benzer şekilde, etkin URL'yi belirli bir yolla eşleştirir . RouteBu çok ilginç bir Kanca; Routegereksiz bileşenden kurtulabilir ve matchnesneye erişebilirsiniz.

Artık kullanıcı sayfasının rota bileşenindeki yolu basitçe şu şekilde değiştirebilirsiniz /user:

<Route path="/user/">
  <User />
</Route>

import {
  // ...
  useRouteMatch,
} from "react-router-dom";
const User = () => {
  const history = useHistory();
const routeMatch = useRouteMatch("/user/:id");
  const location = useLocation();
useEffect(() => {
    console.log(location);
  }, [location]);
const handleBack = () => {
    history.goBack();
  };
const handleNavigation = () => {
    history.push("/user/5");
  };
return (
    <div>
      <div>This is the user page</div>
      {routeMatch ? (
        <div>user Id - {routeMatch.params.id}</div>
      ) : (
        <div>You are viewing your profile</div>
      )}
<div>
        <button onClick={handleBack}>Go Back</button>
      </div>
      <div>
        <button onClick={handleNavigation}>Go To Different User</button>
      </div>
    </div>
  );
};

Çözüm

Kancalar, React ekosistemine harika bir ektir. Artık Hooks ile yönlendirme ile ilgili bazı kodlar gördüğünüze göre, onların sunduklarından tam olarak yararlanmaya hazırsınız.

Bir dahaki sefere kadar güvende kalın ve React Hooks ile kodlamaya devam edin!