Next.js跟react不一樣,提供了兩種Router,本課程採用App Router,只要在app底下,就可以根據資料夾名稱,開啟page.js。
如果,登入成功要跳轉到首頁。在next.js裡,提供了跳轉(client side routing)功能。先import需要的useRouter。
import { useRouter } from 'next/navigation';
<aside> 📢
注意,如果使用pages router,使用的useRouter是不一樣的。
</aside>
import {useRouter} from "next/router";
利用useRouter取得router
export default function 登入() {
**const router = useRouter();**
利用push(),跳轉頁面
function login(){
if (userID == "test" && password =="password"){
**router.push("/Teacherstatus");**
}
else {
alert("登入失敗");
}
}
寫PHP時,可以傳參數,例如,/Teacher.php?tid=053792。在Next.js裡,也可以用同樣的方法取得參數,而且,也提供了dynamic routes,假如,我們在teacher裡,想利用老師的職員編號去取得老師的個人資料,例如「/teacher/053792」,這樣的好處是一般的搜尋引擎會將「/teacher/053792」視為一個獨立頁面。
首先,我們先在「/app/teacher/」裡,新增一個[tid]資料夾,在資料夾下新增一個page.js,利用params就可以取得職員編號了:
/app/teacher/[tid]/page.js:
export default async function Page({ params }) {
const { tid } = await params;
return <div>Teacher id: {tid}</div>;
}