next.js 14 繼續增強其強大的框架，為開發人員提供構建 react 應用程序的強大功能。任何 web 應用程序的關鍵方面之一都是路由，而 next.js 使其變得異常簡單和高效。在這篇文章中，我們將探討如何在 next.js 14 中設置和使用應用程序路由。
next.js 路由簡介
next.js 使用基于文件的路由系統，這意味著頁面目錄的結構決定了應用程序的路由。頁面目錄中的每個文件都成為一條路線。
基本路由
要創建基本路由，您只需將新文件添加到pages目錄即可。例如，如果您在pages目錄中創建一個名為about.js的文件，它將自動在/about.
處可用示例：
// pages/about.js
export default function about() {
return (
<div>
<h1>about us</h1>
<p>this is the about page.</p>
</div>
);
}
動態路由
next.js 還支持使用括號（[]）的動態路由。這允許您使用動態參數創建路線。
示例：
// pages/product/[id].js
import { userouter } from 'next/router';
export default function product() {
const router = userouter();
const { id } = router.query;
return (
<div>
<h1>product {id}</h1>
</div>
);
}
在此示例中，pages/product 目錄中名為 [id].js 的文件創建了一個動態路由，可以通過 /product/1、/product/2 等訪問。
嵌套路由
可以通過在頁面目錄中添加文件夾來創建嵌套路由。每個文件夾代表 url 路徑的一部分。
示例：
// pages/blog/index.js
export default function blog() {
return (
<div>
<h1>blog home</h1>
</div>
);
}
// pages/blog/[slug].js
import { userouter } from 'next/router';
export default function blogpost() {
const router = userouter();
const { slug } = router.query;
return (
<div>
<h1>blog post: {slug}</h1>
</div>
);
}
在此設置中，/blog 路由將渲染index.js，/blog/[slug] 將渲染[slug].js。
api 路由
next.js 還支持 api 路由，允許您在應用程序中創建后端端點。這些都放在pages/api目錄下。
示例：
// pages/api/hello.js
export default function handler(req, res) {
res.status(200).json({ message: 'hello world' });
}
此文件??在 /api/hello 處創建一個 api 端點，該端點以 json 消息進行響應。
自定義路由器
next.js 14 允許使用 next/router 包進行更多自定義和高級路由策略。您可以以編程方式在頁面之間導航并處理更復雜的路由場景。
示例：
import { useRouter } from 'next/router';
export default function Home() {
const router = useRouter();
const navigateToAbout = () => {
router.push('/about');
};
return (
<div>
<h1>Home Page</h1>
<button onclick="{navigateToAbout}">Go to About Page</button>
</div>
);
}
結論
next.js 14 以其強大而靈活的路由系統繼續簡化和增強開發人員體驗。無論您需要靜態、動態還是嵌套路由，next.js 都可以輕松設置和管理應用程序的導航。
我希望這篇文章可以幫助您開始使用 next.js 14 中的路由。如果您有任何問題或建議，請隨時在下面發表評論！
快樂編碼！
以上就是如何在 Nextjs 14 中進行應用程序路由的詳細內容，更多請關注愛掏網 - it200.com其它相關文章！