Allow for absolute titles to be specified in the routesConfig

[isleshocky77]

It would be nice to be able to state in the config whether the title will be using parent titles and dividers or to specify an absolute title to be used without generation.

An example could be something like this

import RouterTitle from 'react-router-title';
import { Router } from 'react-router-dom';

const routes = [
  {
    title: "Welcome to Example Company! The best company around!",  // Would be this exactly
    component: Homepage,
    routes: [
      {
        title: "Widgets", // NOTE: Title would be "Widgets | Example Company"
        path: "/widgets",
        component: Widgets,
        routes: [
          {
            title: "Grand Child", // NOTE: Title would be "Grand Child | Widgets | Example Company"
            path: "/widgets/:id/grand-child",
            component: GrandChild
          },
          {
            title: "Need Help with widgets? | Example Company", // NOTE: Title would be "Need Help with widgets? | Example Company"
            path: "/widgets/help",
            component: WidgetHelp
          }
        ]
      }
    ]
  }
];

const App = () => (
  <Router>
    <RouterTitle pageTitle="Example Company" routesConfig={routes} divider="|" />
    {/* your routes */}
  </Router>
);

export default App;

A solution could

• Different property such as absoluteTitle with title excluded
• Modifier such as titleConcat: 0 meaning don't concat the above N levels (would be nice for the last route example)

[sapkra]

I understand your example but it would not work like this because if the widgets title should be "Widgets | Example Company" then you need to define "Example Company" somewhere. How are you planning to define it or was it just a mistake?

Your titleConcat approach would not work if you want a result like that.

[isleshocky77]

That would be the normal default case as it works now taking Example Company from the pageTitle prop of RouterTitle. The other two need to have some sort of flag to say don't use the parents titles. I think the easiest case is just to have an absolute flag or something.

[sapkra]

Ok, you're right - I totally missed that. ^^

I also think that an additional optional flag would be the best approach. WDYT about the naming of this flag?

const routes = [
  {
    title: "Welcome to Example Company! The best company around!",  // Would be this exactly
    titleAsStandalone: true,
    component: Homepage,
    routes: [
      {
        title: "Widgets", // NOTE: Title would be "Widgets | Example Company"
        path: "/widgets",
        component: Widgets,
        routes: [
          {
            title: "Grand Child", // NOTE: Title would be "Grand Child | Widgets | Example Company"
            path: "/widgets/:id/grand-child",
            component: GrandChild
          },
          {
            title: "Need Help with widgets? | Example Company", // NOTE: Title would be "Need Help with widgets? | Example Company"
            path: "/widgets/help",
            component: WidgetHelp
          }
        ]
      }
    ]
  }
];

[isleshocky77]

Your project, so what ever you feel is best. I don't love it as I think out of the context of this conversation it might not immediately be clear.

cascadeParentTitles: true,
recurseParentTitles: true,
titleCascade: true,
titleCombineWithParents: true, // Looked at how you describe it in the docs "It combines all titles for the affected routes and sub-routes to one string"

In these, it's defaulting to true which is the current behavior and can be turned off.

[sapkra]

The titleConcat option is now implemented with v1.3.2. Can you try if it works like you want?