tags: iThome 鐵人賽 30天

今天要來把首頁的物件做一個整理，首先是先建立一個Content來顯現主要頁面的資訊，如首頁的卡片與影片標記的編輯頁面，知道再用Route去區分網址，分別導到不同的頁面，就來看看如何實行吧~

Content

這裡我們把Content作為主要畫面渲染的起點，用來把不同path的畫面給區分開來。

例如：

• /：顯示首頁資訊 (所有的影片卡片)
• /watch：編輯與查看影片標記頁面

建立/src/components/Content.jsx：

import React from 'react'
import { Box } from '@mui/material'

export default function Main() {
  return (
    <Box sx={{ bgcolor: '#999',flex: "1 1 auto" }}>
    </Box>
  )
}

這裡我把Content的頁面給撐到了最大，並稍微修改了一下CSS，本篇文章的最後會附上整個專案給大家觀看，而下方是為了讓最外層div能夠包含整個頁面所以設定了absolute與上下左右距離個為0 (滿版面)。

.App{
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Route

Content頁面完工後就開始介紹Route來分配畫面吧！

Route一樣是由react-router-dom這個套件呼叫出來：

import { Route } from 'react-router-dom'

那基本的使用方法如下：

<Route path="/路徑" component={Compoent} />

• path: 網址路徑
• component: 當路徑匹配時，會渲染輸入的compoent
• exact: 代表需要完全一樣的路徑才會匹配，如path="/" exact如果路徑是/watch就部會匹配，但如果沒有exact的話是匹配的

這裡使用的react-router-dom版本為5.2.0，如果使用6版以上的話會無法使用 (有另外的用法)

Route 測試範例

import React from 'react'
import { Box } from '@mui/material'
import { Route } from 'react-router-dom'

export default function Main() {
  return (
    <Box sx={{ bgcolor: '#999', flex: "1 1 auto" }}>
      <Route exact path="/">首頁</Route>
      <Route exact path="/watch">影片標記</Route>
    </Box>
  )
}

<Route exact path="/">首頁</Route>連上http://localhost:3000/：

<Route exact path="/watch">影片標記</Route>連上http://localhost:3000/watch：

可以發現，當網址路徑正確時，就會正確被渲染。

後記

以上就是我通常製作網頁的基本作法，當然有更好最法也歡迎下方留言交流一下囉~下一篇就是要來介紹Switch，看看除了Route導向渲染頁面外還可以用Switch來選擇Route，並將錯誤的Route導回預設路徑！

附上專案：2022-iThomeIronman

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

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