且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何动态更改“标题"的“应用程序",基于登录信息(即登录成功或注销后)?

更新时间:2023-12-03 20:09:34

您可以创建一个自定义和连接的 Title 组件,并将其作为 title 道具传递.>

https://codesandbox.io/s/1072ry6rl7

请注意,我的自定义 Title 组件必须支持 className 属性.这是material-ui 要求.

I have this code, please see the title prop:

const App = () => (
  <Admin
    theme={theme}
    customRoutes={customRoutes}
    menu={Menu}
    dataProvider={loopbackRestClient(window.apiUrl)}
    authProvider={authClient()}
    dashboard={Dashboard}
    locale="en"
    i18nProvider={i18nProvider}
    title={`Dashboard - ${window.accountData ? window.accountData.accommodation.name : ''}`}
  >
  // more code here...

This tries to change the rendered title when login succeeds and therefore we get different accommodation.name value from there.

I was expecting that the component may re-render with this event, since login affects the REDUX state, so the window variable (which changed after login) should render a different title.

It did not work.

How may we do it the proper way (react-redux way)?

You can make a custom and connected Title component and pass it as the title prop.

https://codesandbox.io/s/1072ry6rl7

Note that my custom Title component has to support a className prop. This is a material-ui requirement.