Question 17912 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel Inertia React not passing any props

I’m trying to figure out my issue with passing props to a react component. The project is completely stock (Laravel 9.19, standard Inertia installation).

The problem is I do not receive any props when I check my React DevTools in Chrome, it just contains the standard errors: {} property. Does anyone see my issue or can teach me how to pass props with inertia? (I just need to understand how to pass this example ‘name’ variable)

This is my web.php file:


use IlluminateSupportFacadesRoute;
use InertiaInertia;
use AppModelsProduct;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return inertia('Home', [
        'name' => 'testName',
    ]);
})->name('/');

app.jsx file:

import './bootstrap';
import '../css/app.css';

import React from 'react';
import { render } from 'react-dom';
import { createInertiaApp, Head } from '@inertiajs/inertia-react';
import { InertiaProgress } from '@inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
    setup({ el, App, props }) {
        return render(<App {...props} />, el);
    },
});

InertiaProgress.init({ color: '#4B5563' });

Home.jsx file:

import React from 'react';
import Navbar from '@/Shared/Navbar';
import { Head, usePage } from '@inertiajs/inertia-react';

const Home = () => {
  const { name } = usePage().props;
    return (
      <>
      <Head>
          <title>Home</title>
          <meta type="description" head-key="description" content="Home"/>
      </Head>
      {name}
      </>
    )
}

Home.layout = page => <Navbar children={page} headTitle={"Home"}/>

export default Home

Edit:
HandleInertiaRequests.php file:

<?php

namespace AppHttpMiddleware;

use IlluminateHttpRequest;
use InertiaMiddleware;

class HandleInertiaRequests extends Middleware
{
    /**
     * The root template that's loaded on the first page visit.
     *
     * @see https://inertiajs.com/server-side-setup#root-template
     * @var string
     */
    protected $rootView = 'app';

    /**
     * Determines the current asset version.
     *
     * @see https://inertiajs.com/asset-versioning
     * @param  IlluminateHttpRequest  $request
     * @return string|null
     */
    public function version(Request $request): ?string
    {
        return parent::version($request);
    }

    /**
     * Defines the props that are shared by default.
     *
     * @see https://inertiajs.com/shared-data
     * @param  IlluminateHttpRequest  $request
     * @return array
     */
    public function share(Request $request): array
    {
        return array_merge(parent::share($request), [
        ]);
    }
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Figured it out, it had nothing to do with Inertia.

    I was using route cache, so my changes in the web.php file were not applied after saving it.

    Fixed it by clearing the route cache with php artisan cache:clear


  2. 0

    try change intertia function by Inertia::render(...)

    Check if can send props with Inertia::share('name', '...'); before return view

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search