Giriş

React.js, kullanıma hazır yönlendirmeyi desteklemez. React Router, yönlendirmeyi etkinleştirmek için React.js ile birlikte kullanılan çok popüler kitaplıklardan biridir.

Hook Router, tepki.js'de yönlendirmeyi etkinleştirmek için yeni bir kitaplıktır. Çok basit ve küçüktür. Basit ve temiz bir dokümantasyon ile birlikte gelir. Yeni bir taze tepki geliştirici onunla kolayca ellerini kirletebilir.

Bu derste, kullanarak tepki yönlendirmeye daldım hookrouter.js. Bazı navigasyon bağlantıları ile bazı yönlendirmeler oluşturacağız.

genel bakış

Bir örnek anlamak daha kolaydır. Kolay anlaşılması için basitleştirmeye çalışıyorum. Dört yoldan oluşan bir tepki uygulamasının demosunu yapıyoruz: home , about , users ve user-detail . Ayrıca , kullanıcılarda ve kullanıcı ayrıntısı sayfalarında dinamik yönlendirmeyi de gösteriyoruz .

Bize popüler komut satırını kullanarak bir react.js uygulaması oluşturalım npxve yükleyin hookrouter.

npx create-react-app routing-demo
cd routing-demo
npm i -S hookrouter

1. Menü: menülerin listesini tutar ve kullanılır
2. Ana sayfa: ana sayfadır.
3. Hakkında: hakkında sayfasıdır.
4. Kullanıcılar: Bir API'den okunan kullanıcıların bir listesini görüntüler.
5. UserDetail: tek bir kullanıcının ayrıntılarını görüntüler ve bir API'den okunur.
6. NotFound: url herhangi bir rota ile eşleşmediğinde uygulamanın gittiği bir sayfadır.

/components/Menu.js
/pages/Home.js
/pages/About.js
/pages/NotFound.js
/pages/Users.js
/pages/UserDetail.js

logo.svg
App.test.js
App.css

Rotaları düz bir javascript nesnesi olarak tanımlarız. Her özellik adı, rota URL'sidir ve değer, tepki bileşenidir (bizim durumumuzda sayfalar: ana sayfa ve hakkında).

const routes = {
  "/": () => <Home />,
  "/about": () => <About />,
};

Uygulama bileşeninden bir matched rotası aksi takdirde NotFoundsayfası şu şekilde döndürürüz : { match || <NotFound /> }.

import { useRoutes } from "hookrouter";
const routes = {...};
function App() {
const match = useRoutes(routes);
return (
    <div className="App">
      <Menu />
      <div className="container">{match || <NotFound />}</div>
    </div>
  );
}

Bağlantılar, sayfalar arasında gezinmek için kullanılır. Menü bileşeninin içinde bağlantıları tanımlarız. Bağlantı, kitaplıktan Abileşen kullanılarak tanımlanır hookrouter.

import { A } from "hookrouter";
const Menu = () => {
  return (
    <nav className="App-Header">
      <A href="/">Home</A>
      <A href="/about">About</A>
</nav>
  );
};

Yönlendirmenin en önemli özelliklerinden biri dinamik yönlendirmeyi ele almaktır. Bazen URL'de bir kimlik gibi dinamik bir değere sahip olmamız gerekir ve buna bağlı olarak sunucudan veri alırız veya bazı bilgileri görüntüleriz.

Bu özelliği örnek olarak gösteriyoruz. Bir arka uç sunucusundan getirilen kullanıcıların bir listesini gösteriyoruz. Ayrıca, her kullanıcı için kullanıcının detaylı bilgilerini göstermesi için bir buton ekliyoruz. Bağlantıda, hangi kullanıcının görüntüleneceğini bilmek için ID gibi dinamik bir değere sahip olmalıyız.

Rotalarda parametreler, URL bölümünün başına iki nokta üst üste : eklenerek tanımlanır.

1. İki ekstra yol ekleyin: /usersve /users/:id/detail.
2. İki bileşen ekleyin: Usersve UserDetail.
3. Geçmek idparametre olarak UserDetailyol.

const routes = {
  .....
  "/users": () => <Users />,
  "/users/:id/detail": ({ id }) => <UserDetail id={id} />,
};

import { A } from "hookrouter";
const Users = () => {
  const [users, setUsers] = useState([]);
useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
    .then((res) => res.json())
    .then((result) => setUsers(result));
  }, []);
return (
    <table id="users">
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {users.map((user) => (
          <tr key={user.id}>
            <td>{user.id}</td>
            <td>{user.name}</td>
            <td>
              <A href={`/users/${user.id}/detail`}>Details</A>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

Kullanıcının kimliği, kullanıcı detay sayfasına iletilir. Kimlik, kullanıcı ayrıntı bilgilerini arka uç sunucusundan almak için kullanılır: {JSON} Placeholder .

const UserDetail = ({ id }) => {
  const [user, setUser] = useState({});
useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
    .then((res) => res.json())
    .then((result) => setUser(result))
  }, [id]);
return (
    <div>
      <h3>User Detail:</h3>
      <p>ID: {user.id}</p>
      <p>Name: {user.name}</p>
      <p>Username: {user.username}</p>
      <p>Phone: {user.phone}</p>
      <p>Email: {user.email}</p>
      <p>Company: {user.company?.name}</p>
    </div>
  );
};

React.js uygulamasında yönlendirmeyi etkinleştirmek çok kolay hookrouter., yönlendirmenin temellerini ele almaya çalıştım ama yine de kütüphanenin kapsanmayan daha fazla özelliği var redirectingveprogrammatic navigation.