routing

本教程是Laravel手冊的一部分。從https://flaviocopes.com/access/下載。 我們已經了解了如何在 routes/web.php 文件中創建一個路由： Route::get('/dogs', function () { return view('dogs'); })->name('dogs'); 這是一個靜態路由，對應於 /dogs URL。 現在假設你想為每一只狗創建一個頁面，也許你會在上面填寫一個描述、一張圖片等等。 你不能為數據庫中的每一只狗創建一個靜態路由，因為你不知道狗的名字。 假設你有兩只狗，Max和Daisy，下面的代碼將在 /dogs/max 和 /dogs/daisy 上顯示一個“dog”視圖（我們尚未創建）： Route::get('/dogs/max', function () { return view('dog'); }) Route::get('/dogs/daisy', function () { return view('dog'); }) 取而代之，我們在URL中有一個動態分段： Route::get('/dogs/{slug}', function () { return view('dog'); }) slug是一個用於識別URL部分的詞，全小寫且不含空格，例如如果狗的名字是Max，那麼slug就是max。 現在我們可以將slug的值傳遞給回調函數（當路由被命中時調用的函數），並在函數內部將它傳遞給視圖： Route::get('/dogs/{slug}', function ($slug) { return view('dog', ['slug' => $slug]); }) 現在$slug變量可以在Blade模板中使用。 但是我們想要檢索實際的狗的數據。我們有slug，可以想象當我們添加狗時，它存儲在數據庫中。 為此，我們在路由中使用了Dog模型，代碼如下： use App\Models\Dog; Route::get('/dogs/{slug}', function ($slug) { $dog = Dog::find($slug) return view('dog', ['dog' => $dog]); })

＃如何使用Next.js路由器 学习如何使用next/router包来控制Next.js中的路由 在使用Link连接两个页面的Next.js上，我们看到了如何使用Link组件在Next.js应用中声明式地处理路由。 在JSX中管理路由非常方便，但有时您需要以编程方式触发路由更改。 在这种情况下，您可以直接访问Next.js的路由器，它位于next/router包中，并调用其push()方法。 下面是访问路由器的示例： import { useRouter } from 'next/router' export default () => { const router = useRouter() //... } 通过调用useRouter()来获取路由器对象之后，我们可以使用它的方法。 这是客户端路由器，因此方法应仅在前端代码中使用。最简单的方法是将调用包装在useEffect() React钩子中，或者在React有状态组件中的componendDidMount()内部。 您最常使用的是push()和prefetch()。 push()允许我们以编程方式触发URL更改，如前端代码所示： router.push('/login') prefetch()允许我们以编程方式预取URL，在没有自动处理预取的Link标签时非常有用，如下所示： router.prefetch('/login') 完整示例： import { useRouter } from 'next/router' export default () => { const router = useRouter() useEffect(() => { router.prefetch('/login') }) } 您还可以使用路由器来监听路由变更事件。

快速開始在您的 React 應用程式中使用 Reach Router 在最近的一個專案中，我使用了 Reach Router ，我認為這是在 React 應用程式中實現路由的最簡單方法。 相比於我之前使用過的 React Router 來說，我覺得 Reach Router 更容易上手。 以下是一個短短五分鐘的教學，讓您快速了解 Reach Router 的基本用法。 安裝 首先，在命令行輸入以下指令安裝 Reach Router： npm install @reach/router 如果您對 @ 的語法不熟悉，它是 npm 的一個功能，允許使用專屬的套件名稱空間來命名套件。 接下來，將它引入到您的專案中： import { Router } from '@reach/router' 基本用法 我在頂層 React 檔案 index.js 中使用它，通常是在 create-react-app 安裝中，我將所有想要顯示的元件包裝在內： ReactDOM.render( <Router> <Form path="/" /> <PrivateArea path="/private-area" /> </Router>, document.getElementById('root') ) 我在元件上添加的 path 屬性可用於設定它們的路徑。換句話說，當我在瀏覽器的網址欄輸入這個路徑時，Reach Router 就會顯示對應的元件給我看。 / 路徑是預設路由，也就是當您在應用程式網域之外沒有設置 URL / 路徑時，它將顯示。也就是說，它是「首頁」。...