reactjs 无法运行Laravel React项目(Inertia)

x759pob2  于 12个月前  发布在  React
关注(0)|答案(1)|浏览(148)

所以,我一直在沿着this Inertia指南,但我不能让app.blade.php渲染正确的React组件。甚至不能自己渲染。/welcome路由可以工作,但我不能让Inertia正确渲染,甚至不能渲染。控制台上没有错误。下面是我的resources/js/app.js

import './bootstrap';

import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })
    return pages[`./Pages/${name}.jsx`]
  },
  setup({ el, App, props }) {
    createRoot(el).render(<App {...props} />)
  },
});

字符串
以下是我的AppController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Inertia\Inertia;

class AppController extends Controller
{
   public function index() {
     Inertia::render("Index");
   }
}


以下是我的resouces/js/Pages/Index.jsx

import React from 'react';
import { Head } from '@inertiajs/inertia-react';

export default function Index() {
    return (
        <h1>Welcome</h1>
    )
}


app.blade.php文件:

<!DOCTYPE HTML>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />

        @vite('resources/js/app.js')
        @inertiaHead
    </head>
    <body class="antialiased" style="height: 100vh;" id="app">
        @inertia
    </body>
</html>


最后是routes/web.php文件:

<?php

use App\Http\Controllers\AppController;
use Illuminate\Support\Facades\Route;

Route::get('/', [AppController::class, 'index']);

Route::get('/welcome', function () {
    return view('welcome');
});

xmd2e60i

xmd2e60i1#

在AppController的index函数中添加一个return语句,如下所示

public function index() {
    return Inertia::render("Index");
}

字符串

相关问题