(Front)SPA設定-useLocation

基本的に私たちのチームが開発したウェブサイトはspaに戻ります.
react-router-domを使用してspa環境を構築してみました.
まずreact-router-domをインストールします.
BrowserRouter、Route、Switchをインポートし、各コンポーネントにリンクをインポートしました.
ここでは各機能について議論しますが、

BrowserRouter:Webアプリケーションは、HTML 5のHistory APIを使用して、アドレスを更新することなく変更できる機能を提供します.

Switch:複数のルーティングを囲み、1つのパスが一致するルータのみをレンダリングするロールです.

Route:pathプロパティを使用して、pathに表示する構成部品を決定します.

リンク:接続パスの役割、ページアドレスのみを変更します.レンダリング後、aラベルに変更します.

Navigation barは、常にレンダリングされている必要があるため、スイッチの外側にあります.
ここでは、特定のページ(ログイン、登録)で、
Navigation Barをレンダリングするべきではありません.
それをどのように実現するかを探すのに多くの時間がかかりました.
特定のpathを表すために3つの演算子を使用します.
印刷しないようにします.
特定のパス値を取得できるuseLocationが使用されています.
useLocation hooksは、現在滞留しているページに関する情報をユーザーに伝えるhooksです.
このhooksは、defaultPropsが1つしかないlocationオブジェクトを置き換えるreact-router-dom hooksです.

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

const Home = (): JSX.Element => {
  const location = useLocation();
  console.log(location);
  
  return (
    <></>
  );
}

export default Home;

使用方法は次のとおりです.
変数に保存すると、現在のページに関連する値がオブジェクトとしてクエリーされます.

ここで、pathnameというキーには、現在のページのpath値が表示されます.
これはRouteで設定したpath値です.
これにより条件を設定した.
ここでシャベルは2種類あります.
一つは私のインデックスBrowserRouterですjsのアプリではありません.jsで使用します.
したがって、useLocationは動作しません.
もう1つはlocationという変数を使用します.
defaultPropsの場所と競合し、指定されていないエラーが発生しました.変数をlocaと略称しました

{loca.pathname === "/login" || loca.pathname === "/signup"? (<></>) : (<Nav/>)}

ここまで時間がかかりました...
やっぱり私はシャベル王

リセットAPI&リセットモード

SR時に行われたAPIは組長とともに正式に明確に修正された.
まず,機能的なAPIを追加し,フロントエンドに転送する.
その後、アーキテクチャ内の関係設定にエラーが発生し、変更されました.
ここまで仕事をするのは難しくない.

設定時の質量関係

パターンが変更されている以上、DBに適用する必要があります.
そこで問題を発見した.
私たちのグループのDBには良い時計と悪い時計があります.
sequelizeでは、DBに適用するには、まずモデルを定義して移行する必要があります.
好きと嫌いはN:M結合テーブルなので、なぜモデルを作成した後に適用したのか知っています.
2つのテーブルには自分の純価値がなく、Foreign Keyしかありません.(userId, postId)
ここで問題が発生しました.
純粋なColumn値がないため、モデルを定義できません.npx sequelize model:generate --name Task --attributesこのコマンドにattributes値を入力しない場合は、Attribute '' cannot be parsed: Cannot read property 'dataType' of undefinedattributeの値を取得できないというエラーが発生しました.
また一つの難関に直面して、これは今日解決できませんでした...

コメントサイト

https://velog.io/@yiyb0603/React-Router-dom%EC%9D%98-%EC%9C%A0%EC%9A%A9%ED%95%9C-hooks%EB%93%A4