inertia `title` is not replaced when used with a prop in presistent `<Layout />`

Version:

@inertiajs/react version: latest

Describe the problem:

I have a Layout like this:

import { Head } from '@inertiajs/react';
import type { PropsWithChildren, JSX } from 'react';

interface LayoutProps {
  title?: string;
}

const Layout = ({
  title,
  children
}: PropsWithChildren<LayoutProps>): JSX.Element => {
  return (
    <>
      <Head title={title ? `${title} | MyApp` : 'MyApp'} />
      /* ... */
    </>
  );
};

export default Layout;

And consumed as presistent Layout like this: https://inertiajs.com/pages#persistent-layouts

However, when I'm navigating through pages, the title is not changing at all.

Note, I'm using both @routes (for using <Link /> to navigate between pages) and @inertiaHead together, and I'm not sure whether that's the problem.

For now, I have to use react-helmet to make it work..... instead of the build-in <Head /> component provided by inertia

Sep 26 '23 00:09 xsjcTony

Show page sample how you pass the title props to the layout

Sep 27 '23 08:09 ramonmalcolm10

@ramonmalcolm10

Home.layout = (page: ReactNode): JSX.Element => <Layout title="Home">{page}</Layout>;

Sep 27 '23 22:09 xsjcTony

You might have have to share a repo with with the issue, I am not able to replicate.

Sep 27 '23 23:09 ramonmalcolm10

Well... it's pretty hard honestly, to create a minimal reproduction... I'm using laravel + vite by the way, where I'm not sure whether this might be the cause. The project suffering this issue uses the pingCRM starting template and replaced laravel-mix with vite. Thanks for the investigation anyway.

Sep 28 '23 00:09 xsjcTony

I use the same, not sure if you want me to create a working sample and share the repo

Sep 28 '23 00:09 ramonmalcolm10

Creating a new repo / Running an existing repo would be a bit hard for me without admin access on my laptop (due to business restrictions) so I might not be able to see whether it's going to work or not. I'll leave the issue here in case anyone else is suffering the same thing. Thanks for the help

Sep 28 '23 00:09 xsjcTony

add the inertia attribute to your title tag in your blade file in order to allow the title component to replace your title

app.blade.php file

<head>
{{-- other head tags --}}
<title inertia="" >{{ $page['props']['meta']['title']??'' }}</title>
</head>

Oct 05 '23 16:10 3likayed

add the inertia attribute to your title tag in your blade file in order to allow the title component to replace your title

app.blade.php file
<head>
{{-- other head tags --}}
<title inertia="" >{{ $page['props']['meta']['title']??'' }}</title>
</head>

Will give it a try later on. This is not mentioned in the documentation🤣

Oct 06 '23 00:10 xsjcTony

@3likayed I did try, but no luck. The issue only happens with presistent layout. Guess I'll switch to react-helmet instead.

Jan 16 '24 07:01 xsjcTony

Hello ! For me in my adonis/react app with Inertia wich is the same as laravel, I put the Head tage inside my Main components rendered as my Home.tsx :

return (   
{.....} 
<Head title="My app" />
{.....} 
)

Home.layout = (page: HTMLElement) => <Layout children={page} />;
export default Home;

And in my Layout.tsx :

import React from "react";
import Header from "./Header";
import Footer from "./Footer";

const Layout = ({ children }) => {
  return (
    <>
      <Header />
      {children}
      <Footer />
    </>
  );
};

export default Layout;

Jan 17 '24 14:01 enzo-mir

I also have this problem, want to access the auth user info from shared() inside the Header, but without success..

Jan 17 '24 15:01 vitalijalbu

I also have this problem, want to access the auth user info from shared() inside the Header, but without success..

For user infos I personally use de props page for every pages and cache the function to send userData but yeah if i could use it throught the Layout this would be good ....

Jan 17 '24 15:01 enzo-mir

I also have this problem, want to access the auth user info from shared() inside the Header, but without success..

For user infos I personally use de props page for every pages and cache the function to send userData but yeah if i could use it throught the Layout this would be good ....

I also di. something like this, man can you share your app.jsx code? cause I have header and footer inside the app.jsx but want to separate them. many thanks

Jan 17 '24 16:01 vitalijalbu

I also have this problem, want to access the auth user info from shared() inside the Header, but without success..

For user infos I personally use de props page for every pages and cache the function to send userData but yeah if i could use it throught the Layout this would be good ....

I also di. something like this, man can you share your app.jsx code? cause I have header and footer inside the app.jsx but want to separate them. many thanks

I use adonis btw but it doesn't matter, App.tsx :

import React from "react";
import { createRoot } from "react-dom/client";
import { InertiaApp } from "@inertiajs/inertia-react";
import "../css/App.css";
import { InertiaProgress } from "@inertiajs/progress";

const app = document.getElementById("app");
const root = createRoot(app);
InertiaProgress.init({ color: "#4a3f30" });
root.render(
  <InertiaApp
    initialPage={JSON.parse(app.dataset.page)}
    resolveComponent={(name) =>
      import(`./Pages/${name}`).then((module) => module.default)
    }
    initialComponent={""}
  />
);

Jan 17 '24 17:01 enzo-mir

I'm having trouble reproducing the title tag issue with persistent layouts. Feel free to re-raise this though (with a demo to replicate) if it comes up again!

Jun 21 '24 17:06 derrickreimer

inertia inertia copied to clipboard

`title` is not replaced when used with a prop in presistent `<Layout />`

Version:

Describe the problem:

inertia
inertia copied to clipboard