search

inertiajs / inertia

Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.
https://inertiajs.com
MIT License
6.5k stars 436 forks source link

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

Closed xsjcTony closed 4 months ago

xsjcTony commented 1 year ago

Version:

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

ramonmalcolm10 commented 1 year ago

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

xsjcTony commented 1 year ago

@ramonmalcolm10 

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

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

xsjcTony commented 1 year ago

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.

ramonmalcolm10 commented 1 year ago

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

xsjcTony commented 1 year ago

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

3likayed commented 1 year ago

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>
xsjcTony commented 1 year ago

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šŸ¤£

xsjcTony commented 9 months ago

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

enzo-mir commented 9 months ago

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;
vitalijalbu commented 9 months ago

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

enzo-mir commented 9 months ago

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 ....

vitalijalbu commented 9 months ago

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

enzo-mir commented 9 months ago

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={""}
  />
);
derrickreimer commented 4 months ago

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!