今日のホットスポット反応-router-dom v 6/カードソート

😎 実装ページ

/beansページ

🤔 今日の話題

1.react router domバージョン6新しい構文エラー

以前の文法

  <NavBar />
  <Switch>
    <Route exact path="/">
      <Main />
    </Route>
    <Route path="/posts">
      <Posts />
    </Route>
    <Route path="/beans">
      <Beans />
    </Route>
    <Route path="/myPage">
      <MyPage />
    </Route>
  </Switch>
</>

最新の構文

      <NavBar />
  <Routes>
    <Route exact path="/" element={<Main />} />
    <Route path="/posts" element={<Posts />} />
    <Route path="/beans" element={<Beans />} />
    <Route path="/myPage" element={<MyPage />} />
  </Routes>
  

2.eslint prop typesエラー

{
 "extends": ["react-app",
 	     "eslint:recommended",
             "plugin:react/recommended"],
 "rules": { "react/prop-types": ["off"] }
}

3. styled-components

4.beansページAPI会議

beanページ通信の追加

5.liラベルflexソートのトラブルシューティング

質問:justify-contents

 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;

試行:pxの計算と適用

   & li {
    display: inline-block;
    margin: 4px;
  }

  & li:not(:nth-child(4n)) {
    margin-right: 20px;
  }

  & li {
    margin-bottom: 20px;
  } 

ソリューション:gridの使用

 display: grid;
 grid-template-columns: repeat(auto-fill, 250px);
 justify-content: space-between;
 grid-gap: 20px;

明日やること