GALAXY TECH
Chuyên gia Công nghệ
Chủ Nhật, 19/05/2019 | 00:00 GMT+7

Sử dụng Thành phần liên kết Gatsby để điều hướng giữa các trang

Bây giờ ta đã xem qua những điều cơ bản về cách làm việc với Gatsby để xây dựng một trang web tĩnh, hãy bắt đầu khám phá một số nội dung bên trong của nó. Đối với bài đăng này, tôi sẽ đề cập đến thành phần Liên kết Gatsby, thành phần này bao bọc thành phần Liên kết được gạch dưới của Bộ định tuyến tiếp cận , mà Gatsby sử dụng nội bộ để định tuyến.

Thành phần Liên kết được sử dụng để chuyển giữa các trang nội bộ của trang web Gatsby thay vì sử dụng các thẻ liên kết ( a ) thông thường. Những lợi ích của việc sử dụng Liên kết thay vì một neo thông thường là:

  • Gatsby sẽ hiển thị trước một cách thông minh nội dung được liên kết đến
  • Trạng thái có thể được chuyển đến trang được liên kết đến
  • Kiểu tùy chỉnh hoặc một lớp tùy chỉnh có thể được thêm vào liên kết khi trang đang hoạt động tương ứng với liên kết.
  • Đây là trường hợp sử dụng nâng cao hơn một chút, nhưng đối tượng lịch sử của trình duyệt có thể được kiểm soát khi sử dụng thành phần Link .

Sử dụng thành phần liên kết rất đơn giản, chỉ cần nhập nó và sử dụng nó với ít nhất là to prop, nó sẽ trỏ đến một đường dẫn tương đối trên trang web:

import React from 'react';
import { Link } from 'gatsby';

const AuthorCard = ({ author }) => {
  return (
    <div>
      <img src={author.avatar.children[0].fixed.src} alt={author.name} />
      <p>
        <Link to={`/author/${author.id}/`}>More posts</Link>
      </p>
    </div>
  );
};

export default AuthorCard;

Bạn cũng có thể chuyển vào bất kỳ chỗ dựa nào mà bạn thường sử dụng trên thẻ liên kết. Ví dụ: hãy thêm title vào liên kết của ta :

<Link
  to={`/author/${author.id}/`}
  title={`View all posts by ${author.name}`}
>
  More posts
</Link>

Khi liên kết với một domain bên ngoài hoặc đến một trang web khác không phải Gatsby trên cùng một domain , hãy sử dụng các thẻ liên kết thông thường.

Trang đang hoạt động

Bạn có thể tạo kiểu các liên kết trên trang đang hoạt động theo cách khác nhau bằng cách sử dụng đối tượng kiểu hoặc tên lớp. Đối với một đối tượng kiểu, hãy sử dụng hỗ trợ activeStyle :

<Link
  to={`/about/`}
  activeStyle={{ textDecoration: "salmon double underline" }}
>
  About Us
</Link>

Và để sử dụng tên lớp thay thế, hãy chỉ định một phần activeClassName hỗ trợ activeClassName :

<Link to={`/about/`} activeClassName="active">
  About Us
</Link>

Liên kết với Trang chủ

Để trỏ đến trang chủ, chỉ cần sử dụng / làm giá trị cho các to chống đỡ:

<Link to="/">Go home</Link>

Trạng thái chuyển tiếp

Thành phần Link cũng chấp nhận một hỗ trợ state và trang nhận sẽ có quyền truy cập vào những gì được chuyển vào hỗ trợ đó thông qua location prop , tại location.state :

<Link to="/" state={{returningVisitor: true}}>
  Go home
</Link>

Liên kết có lập trình với navigate

Khi bạn cần sử dụng chức năng của thành phần Link , nhưng phải làm như vậy theo chương trình bên ngoài đánh dấu JSX, bạn có thể sử dụng chức năng trình trợ giúp navigate :

import React from 'react';
import { navigate } from 'gatsby';

handleSubmit = e => {
  e.preventDefault();
  const form = e.target;

  // ...do stuff here to submit the form data
  // (e.g.: using the fetch API)

  // Then navigate to the path that corresponds to the form's
  // action attribute 
  navigate(form.getAttribute('action');
};

navigate lấy đối số thứ 2 tùy chọn, đối số này phải là một đối tượng mà bạn có thể chỉ định state để chuyển vào và / hoặc nếu lịch sử trình duyệt nên được thay thế:

navigate(form.getAttribute('action', {
  state: { message: 'Thanks a bunch!' },
  replace: true
});

withPrefix & pathPrefix

Nếu trang web production của bạn được lưu trữ trong một folder con, bạn cần đặt giá trị cho pathPrefix bên trong file gatsby-config.js của trang web. Bằng cách này, Gatsby sẽ xây dựng chính xác các URL để liên kết đến mức thấp và mọi thứ sẽ chỉ hoạt động local khi phát triển và production .

Bạn cũng có thể sử dụng phương thức trợ giúp withPrefix để thêm tiền tố của trang web theo cách thủ công. Điều này có thể hữu ích khi cần các đường dẫn tuyệt đối:

import React from 'react';
import Helmet from 'react-helmet';
import { withPrefix } from 'gatsby';

const Index = props => {
  return (
    <>
      <Helmet>
        <link rel="icon" sizes="32x32" href={withPrefix('favicon-32x32.png')} />
        <link rel="icon" sizes="192x192" href={withPrefix('favicon-192x192.png')} />
        {/* More stuff here... */}
      </Helmet>

      <div className={props.className}>
        {props.children}
      </div>
    </>
  );
};

export default Index;

🔗 Đến đây bạn có thể tiếp tục và bắt đầu liên kết với tất cả mọi thứ! Để có cái nhìn sâu hơn về thành phần Link của Gatsby, hãy xem tài liệu chính thức .

Tags:

Các tin liên quan