프로젝트 40/100- 정적 암호 통화 데이터베이스 생성을 통한 React 라우터 사용 연습

어이!내 임무는 100명이 반응하도록 하는 것이다.js 프로젝트는 3월 8일에 끝납니다.개발자 파일이나 업데이트에 관심을 가져 주십시오. 문제가 있으면 언제든지 연락 주십시오.지지해 주셔서 감사합니다!
오늘 배포된 어플리케이션에 링크: Link
재구매 계약 링크: github
만약 React 프로그램을 구축하고 있다면, 서로 다른 페이지를 보여주는 간단한 방법이 필요할 것이다.현재 표준은 react-router-domnpm 패키지를 사용합니다.
이 프로젝트는 Ant Design 및 Lodash를 사용하는 간단한 블로그 사용자 인터페이스를 기반으로 합니다.만약 네가 처음부터 시작하고 싶다면, 그것은 가장 좋은 출발점이다.

반응 라우터

프로그램에서 루트를 만드는 도구는 인공 공유기입니다.왜 인조입니까?url 루트는 진실이지만 React가 한 페이지 프로그램을 만들었기 때문에 페이지 자체가 React에게 "url이 이 주소에 있을 때 이 구성 요소만 표시됩니다."라고 알려 줍니다.
이 프로젝트에서 저는 react-router-dom 소프트웨어 패키지의 몇 가지 부분을 사용했습니다. 저는 문서를 읽어야 합니다. 왜냐하면 아래의 강좌가 매우 낡아서 추천하지 않는 루트 시스템을 사용했습니다.
먼저 패키지를 파일로 가져와야 합니다.나는 내 응용 프로그램 구성 요소에서 이 점을 실현했고, 그 중에서 모든 글의 미리 보기를 보여 주었다.패키지를 가져오는 방법은 다음과 같습니다.

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

가져온 객체가 aliasing을 사용하여 섹시하지 않은 BrowserRouter의 이름을 "Router"로 바꿉니다.
응용 프로그램에서 라우터를 사용하려면 먼저 JSX 요소를 열고 라우터 구성 요소를 만듭니다. 저는 제 구성 요소에 스위치를 채워서 React Router에 첫 번째 일치하는 경로를 가진 구성 요소를 보여 줍니다.이 때문에, 우리는 밑에 색인 페이지를 열거했기 때문에, 마지막과 일치하기 때문에 기본값입니다.

const App = () => {
  return (
    <div className="app_container">
      <Router>
        <Switch>
          <Route path='/post/:id'>
            <Post />
          </Route>
          <Route path='/'>
            <Posts />
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

우리는 browser-router-dom에서 도입한 세 개의 구성 요소를 모두 사용했음을 알 수 있다.공유기는 React가 공유기라는 것을 알게 하고 해당하는 행동을 하기 위해 교환기는 공유기에 path 속성에 정의된 첫 번째 일치하는 경로를 가진 구성 요소를 표시해야 한다고 알려 준다.요소 경로설정은 경로설정할 경로를 정의하는 위치입니다.그런 다음 스위치에 표시할 구성 요소를 알려주는 Route 요소가 하위 요소에 지정됩니다.
경로 "/"의 색인 페이지에 Posts 구성 요소가 표시됩니다.다음은 우리가 파악하고 있는 모든 가능한 암호화폐의 목록입니다. 예를 들어:

이 구성 요소에서 우리는 아날로그api에서 데이터를 가져옵니다. 이것은 JSON 파일로 암호화폐 정보를 채운 대상 그룹을 포함합니다.아날로그api 그룹의 모든 대상을 비추고 PostSnippet 구성 요소를 사용하여 화면에 표시합니다.이것은 이미 어제 프로젝트에서 토론한 적이 있기 때문에 나는 다시는 그것을 토론하지 않을 것이다. 그러나 github을 보고 JSX를 보십시오.Ant Design의 사전 제작 구성 요소를 사용하여 탐색 모음을 설정했는데 이 구성 요소는 매우 멋진 title 속성을 사용합니다.

올바른 구성 요소 표시

이때 나는 어찌할 바를 몰랐다.내가 따르는 강좌는 Reach Router를 사용했는데, 이것은 좀 낡았다. 나는 그것이 이미 React Router 프로젝트에 포함되었다고 믿기 때문에 나 자신에게만 의지할 수 있다.post 경로에서 :id 변수가 인용한 페이지로 진정으로 이동하려면post에서 어떤 방식으로 이 변수를 얻어야 합니다.우리는 어떻게 동태적으로 이 점을 할 수 있습니까?우리는 도구를 전달할 수 있지만, 만약 내가 만 가지 비밀번호에 관한 글을 가지고 있다면?
React Router useParams() 메서드를 입력합니다.useParams 패키지에서 react-router-dom 객체를 가져오면 Post 구성 요소에서 이 페이지에 사용할 실제 고유 ID를 얻을 수 있습니다.

import {useParams} from 'react-router-dom';
...

const postId = useParams().id;

이렇게 하면 실제 URL에서 매개변수를 검색하여 이름이 id인 매개변수를 찾습니다.그리고 이 ID를 사용하여 도구에서 정보를 전달하지 않고도 아날로그 암호화폐 API에서 올바른 글을 검색하고 찾을 수 있습니다.그리고 저는 useState과 useEffect React 갈고리를 사용하여 Post 구성 요소의 상태를 설정합니다.postId 변수가 변하면 API에서 내용을 얻을 수 있습니다.다음은 내가 보기에 이 구성 요소의 모습이다.

import React, {useState,useEffect} from 'react';
import {Card,PageHeader} from 'antd';
import {useParams} from 'react-router-dom';
import api from '../mock_api';

const Post = (props) => {

  const postId = useParams().id;
  const [title,setTitle] = useState('');
  const [content,setContent] = useState('');
  const [imageUrl,setImageUrl] = useState('');

  useEffect(() => {
    let post = api[postId];
    setTitle(post.coin);
    setContent(post.description);
  },[postId])

  return (
    <div className="post_container">
      <div className="page_header_container">
        <PageHeader
          style={{
            border: '1px solid rgb(235,237,240)'
          }}
          title={title}
        />
      </div>
      <div className="post_content_container">
        <Card style={{marginTop: '20px'}} >
          {
            content.split('\n').map((textParagraph,idx) => {
              return <p key={idx}>{textParagraph}</p>
            })
          }
        </Card>
      </div>
    </div>
  )
}

export default Post;

Ant Design의 카드와 PageHeader 구성 요소 (어제 강좌에서 설명한 것), 그리고 맵 방법을 사용했습니다. 텍스트에 페이지 나누기 \n을 인코딩할 때마다 설명을 읽을 수 있는 단락으로 나눌 수 있습니다.
이번 주 일부 주식과 암호화폐에 대한 대대적인 홍보를 감안하여, 그것들을 기념하기 위해 Cointdesk 암호화폐 상위 5위에 작은 데이터베이스를 만드는 것이 매우 재미있을 것이라고 나는 생각한다.
내일 동적 데이터 주의!더 이상 아날로그 API가 없습니다!