おもちゃプロジェクトpostpageインプリメンテーション(1):react router

Post Pageインプリメンテーション(1)
Postpageを実現する過程を書きました.
1.反応経路へのページの追加
pageを実装する前にルーティングが接続されています.
なぜ

の空白ページを置いたのですか?
コードがセットされた後,ルーティングに追加されると,APIではエラーと区別できず,ルーティングパラメータも必要となるため,先に接続した.

// post page
import React from 'react';
import PostViewer from '../../components/organisms/post/PostViewer';

const PostPage = () => {
  return <PostViewer />;
};

export default PostPage;

// post viewer component
import React from 'react';

const PostViewer = () => {
  return <div>글 보기 페이지 입니다.</div>;
};

export default PostViewer;

postは、特定のユーザの下でネストされたルータを使用します.この機能はreact-router v 6から使えるそうです.

v 5を標準として作成されていますが、ネストされたルータの機能はより清潔に見え、内部にはv 6パッケージが敷かれており、正式に移行プロセスを経験しています.

まず

をインストールします!

npm install react-router@6 react-router-dom@6

とURL形状は「userId/postUrlTitle」であり、userIdには複数のページのルーティング情報があり、移行時にルーティング経路をuserId/*に変更するとともに、同様にVelogPageに変換される.

const App = () => {
  const userId = useAppSelector(state => state.userState.id);
  return (
    <>
      <BrowserRouter>
        <ul>
// ...
        </ul>
        <Routes>
          <Route index element={<HomePage />} />
          <Route path="@:userId/*" element={<VelogPage />} />
// ...
        </Routes>
      </BrowserRouter>
    </>
  );
};

export default App;

は、post URLを処理するために、velogページにPostPage routeを追加した.

import React from 'react';
import { Link, Route, Routes } from 'react-router-dom';
import UserPage from './UserPage';
import ArticlePage from './ArticlePage';
import SeriesPage from './SeriesPage';
import PostPage from '../home/PostPage';

const VelogPage = () => {
// ...
  return (
    <div>
// ...
      <Routes>
        <Route path="/" element={<ArticlePage />} />
        <Route path=":urlSlug" element={<PostPage />} />
        <Route path="series" element={<SeriesPage />} />
        <Route path="about" element={<UserPage />} />
      </Routes>
    </div>
  );
};

export default VelogPage;

2.Post Viewerの実装
React Route paramsを呼び出す
post url情報を再取得するには、hookを使用してparamsを呼び出してみます.

useParams

URLパラメータを使用して与えられた内容をキー/値形式のオブジェクトに戻します.これはRouteのmatch情報の属性で、parameterだけを書くとよく見えます.

注:reduxを使用してstoreにpost cardを作成する場合、パスを格納する方法も考えたことがありますが、メモリ容量が大量に消費され、格納されたコンテンツがサービスユーザーによって追加されたり削除されたりすることが多いため、トラフィックが高いです.

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

const PostViewer = () => {
  let { userId, urlSlug } = useParams<{userId: string, urlSlug: string}>();

  return <div>글 보기 페이지 입니다.</div>;
};

export default PostViewer;

GET API呼び出し
axiosを使用してurl getを取得します.

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { API_HOST } from '../../../constant';

const PostViewer = () => {
  const [postBody, setPostBody] = useState<HTMLHtmlElement>();
  let { userId, urlSlug } = useParams<{userId: string, urlSlug: string}>();

  useEffect(() => {
    axios({ baseURL: API_HOST, url: `/@${userId}/${urlSlug}` })
      .then(response => {
        console.log(response.data);
        setPostBody(response.data);
      }).catch(error => {
        console.error(error);
      });
  }, [userId, urlSlug]);

  console.log(postBody);

  return (
    <div>
      글 보기 페이지 입니다.
    </div>
  );
};

export default PostViewer;

3.Not found pageの適用
404エラー処理のためにNot found pageアプリケーションを作成します.tsxルーティングパスの最後の行に適用されます.

<Route path='*' exact={true} component={NotFoundPage} />

ルートのないurlをbaseUrl/の後ろに打つと、NotFoundPageが呼び出されます.
その他の質問
blog URLに直接アクセスしてもfound pageは適用したくないのですが、プロジェクトwebpack設定のエラーはbaseUrl/page 1/page 2でアクセスできません.
index.jsをインポートできません.次のレッスンでさらに適用し、ビューアに文章の内容を表示します.
React Router
今回実施した調査の内容は,反応経路には2種類のルータがあるということである.
Browser Router

HTML 5 history APIで実現されたRouter.

履歴オブジェクトを介してブラウザセッション履歴にアクセスする方法を提供します.

一般的には、後退と前進が代表的である.

window.history.back()
window.history.forward()

は一般的なルータです.

<BrowserRouter basename="/calendar">
    <Link to="/today"/> // renders <a href="/calendar/today">
    <Link to="/tomorrow"/> // renders <a href="/calendar/tomorrow">
</BrowserRouter>

Hash Router

urlに#と同じハッシュを貼り付けます.

<HashRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="#/calendar/today">

なのでurlをサーバに送信できません!

の静的ページを呼び出すときに使用できるそうです.

https://v5.reactrouter.com/web/api/BrowserRouter
https://developer.mozilla.org/ko/docs/Web/API/History_API