tags: iThome 鐵人賽 30天

昨天做好了YouTube Iframe API component今天來實測用看看吧。

先把要傳入的參數列出來並準備妥當：

先來測試一下：

import React, { useState } from 'react'
import YouTubeIframe from '../elements/YouTubeIframe'

export default function WatchPage(props) {
    const {  } = props
    const [player, setPlayer] = useState(null)

    return (
        <div>
            <div id="player"></div>
            <YouTubeIframe
                v={"Ga22mpTDS6A"}
                t={0}
                playerid="player"
                player={player}
                setPlayer={pl => setPlayer(pl)}
            />
        </div>
    )
}

畫面有順利出來了！

但其實在畫面出來前有碰到一點小坑，是react-router-dom的問題，所以我索性把它改成最新的v6版本了，至於要怎麼改就來看看吧！

react-router-dom v6

從v5升級到v6的第一個轉變是Switch變成了Routes，用法一樣，再來是Route裡的component也變成了element，exact也不能用了，所以這裡把/watch往前擺，更改後的Content大致長這樣：

<Routes>
    <Route path="/watch" element={<WatchPage />} />
    <Route path="/" element={<HomePage />} />
</Routes>

至於Redirect也是被新的元件Navigate所取代，所以更改後如下:

<Routes>
    <Route path="/watch" element={<WatchPage />} />
    <Route path="/" element={<HomePage />} />
    <Route path="*" element={<Navigate to="/" />} />
</Routes>

<Route path="*" element={<Navigate to="/" />} />

這條為取代Redirect的用法，然後path="*"代表所有路徑都通吃的意思，一樣依照Routes (原Switch) 的原理，第一個匹配後面就不執行，所以當前面都匹配完了就會把不正確的網址導回指定網址囉~

然後最上層的BrowserRouter還是一樣不變，/src/index.js：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter as Router } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router> {/* 加上這裡 */}
      <App />
    </Router> {/* 加上這裡 */}
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

後記

今天突然一個小插曲把原先的計劃給打亂了，不過剛好業趁這個機會把新版的react-router-domv6給稍微學習一下，也算是學到了新的用法，才不會突然用不一樣的版本而不知所措，那明天就要來正式動工編輯畫面了！

附上專案：2022-iThomeIronman

對資安或Mapbox有興趣的話也可以觀看我們團隊的鐵人發文喔~

• 資安新人30
• 打造你的主題地圖！Mapbox 也可以！(ft. React)