Livewire v3 リダイレクト

リダイレクト

ユーザーがあるアクション（例えば、フォームの送信）を実行した後、アプリケーション内の別のページにリダイレクトしたい場合があります。After a user performs some action — like submitting a form — you may want to redirect them to another page in your application.

Livewireのリクエストは、標準的なフルページのブラウザリクエストではないため、標準的なHTTPリダイレクトは機能しません。代わりに、JavaScriptを介してリダイレクトをトリガーする必要があります。幸いなことに、Livewireはコンポーネント内で使用できるシンプルな$this->redirect()ヘルパメソッドを提供しています。内部的には、Livewireがフロントエンドでのリダイレクト処理を行います。Because Livewire requests aren't standard full-page browser requests, standard HTTP redirects won't work. Instead, you need to trigger redirects via JavaScript. Fortunately, Livewire exposes a simple $this->redirect() helper method to use within your components. Internally, Livewire will handle the process of redirecting on the frontend.

必要であれば、コンポーネント内でLaravelの組み込みリダイレクトユーティリティを使用することもできます。If you prefer, you can use Laravel's built-in redirect utilities[https://laravel.com/docs/responses#redirects] within your components as well.

基本的な使い方Basic usage

以下は、CreatePost Livewireコンポーネントの例です。このコンポーネントは、ユーザーがフォームを送信して投稿を作成した後、別のページにリダイレクトします。Below is an example of a CreatePost Livewire component that redirects the user to another page after they submit the form to create a post:

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Post;

class CreatePost extends Component
{
	public $title = '';

    public $content = '';

    public function save()
    {
		Post::create([
			'title' => $this->title,
			'content' => $this->content,
		]);

		$this->redirect('/posts'); // [tl! highlight]
    }

    public function render()
    {
        return view('livewire.create-post');
    }
}

ご覧のとおり、saveアクションがトリガーされると、/postsへのリダイレクトもトリガーされます。Livewireがこのレスポンスを受信すると、フロントエンドでユーザーを新しいURLにリダイレクトします。As you can see, when the save action is triggered, a redirect will also be triggered to /posts. When Livewire receives this response, it will redirect the user to the new URL on the frontend.

ルートへのリダイレクトRedirect to Route

ルート名を使用してページにリダイレクトしたい場合は、redirectRouteを使用できます。In case you want to redirect to a page using its route name you can use the redirectRoute.

例えば、以下のように'profile'という名前のルートを持つページがあるとします。For example, if you have a page with the route named 'profile' like this:

    Route::get('/user/profile', function () {
        // ...
    })->name('profile');

redirectRouteを使用して、以下のようにルート名を使用してそのページにリダイレクトできます。You can use redirectRoute to redirect to that page using the name of the route like so:

    $this->redirectRoute('profile');

ルートにパラメータを渡す必要がある場合は、redirectRouteメソッドの2番目の引数を使用できます。In case you need to pass parameters to the route you may use the second argument of the method redirectRoute like so:

    $this->redirectRoute('profile', ['id' => 1]);

意図したページへのリダイレクトRedirect to intended

ユーザーを前のページにリダイレクトしたい場合は、redirectIntendedを使用できます。オプションのデフォルトURLを最初の引数として受け取り、前のページを特定できない場合のフォールバックとして使用されます。In case you want to redirect the user back to the previous page they were on you can use redirectIntended. It accepts an optional default URL as its first argument which is used as a fallback if no previous page can be determined:

    $this->redirectIntended('/default/url');

フルページコンポーネントへのリダイレクトRedirecting to full-page components

LivewireはLaravelの組み込みリダイレクト機能を使用しているため、通常のLaravelアプリケーションで利用できるすべてのリダイレクトメソッドを使用できます。Because Livewire uses Laravel's built-in redirection feature, you can use all of the redirection methods available to you in a typical Laravel application.

例えば、以下のように、Livewireコンポーネントをルートのフルページコンポーネントとして使用している場合：For example, if you are using a Livewire component as a full-page component for a route like so:

use App\Livewire\ShowPosts;

Route::get('/posts', ShowPosts::class);

コンポーネント名をredirect()メソッドに渡すことで、コンポーネントにリダイレクトできます。You can redirect to the component by providing the component name to the redirect() method:

public function save()
{
    // ...

    $this->redirect(ShowPosts::class);
}

フラッシュメッセージFlash messages

Livewireでは、Laravelの組み込みリダイレクトメソッドの使用に加えて、Laravelのセッションフラッシュデータユーティリティもサポートしています。In addition to allowing you to use Laravel's built-in redirection methods, Livewire also supports Laravel's session flash data utilities[https://laravel.com/docs/session#flash-data].

リダイレクトと一緒にフラッシュデータを渡すには、Laravelのsession()->flash()メソッドを以下のように使用します。To pass flash data along with a redirect, you can use Laravel's session()->flash() method like so:

use Livewire\Component;

class UpdatePost extends Component
{
    // ...

    public function update()
    {
        // ...

        session()->flash('status', 'Post successfully updated.');

        $this->redirect('/posts');
    }
}

リダイレクト先のページに次のBladeスニペットが含まれている場合、ユーザーは投稿を更新した後、「Post successfully updated.」というメッセージが表示されます。Assuming the page being redirected to contain the following Blade snippet, the user will see a "Post successfully updated." message after updating the post:

@if (session('status'))
    <div class="alert alert-success">
        {{ session('status') }}
    </div>
@endif