Change title on each page on route

Description

• Type: Question

Question

How can I change the title on each page for universal app. So for example I would like About.jsx to have About | React Go title, Dashboard.jsx to have Dashboard | React Go and so on… I would also like to make use of titleTemplate

[choonkending]

Yes it will, you will have to specify it. Look at the comparision here, still some stuff to clean up for production - but it works on dev.

Need to find a bunker somewhere and finish this off next week (after Tuesday).

[ZeroCho]

Meta.jsx is not related with client side title. So if you want to use Helmet in client-side, you should make Meta.jsx totally different from current Meta.jsx

For example meta.jsx in my blog looks like below.

export default (routes, state, params) => {
  let title;
  const post = state.posting.post;
  if (routes && routes[1]) {
    switch (routes[1].path) {
      case '/category/:category/post/:id':
        if (post) {
          const filteredContent = filterTag(post.content).substring(0, 150);
          title = `${post.category} ${post.title}`;
          replaceMeta(config.meta, [
            { name: 'description', content: filteredContent },
            { property: 'og:title', content: title },
            { property: 'og:description', content: filteredContent },
            { property: 'og:type', content: 'article' },
            { property: 'og:url', content: `${url}/category/${post.category}/post/${post._id}` },
            { name: 'twitter:title', content: title },
            { name: 'twitter:description', content: filteredContent },
          ]);
        }
        break;
      case '/category/:category':
        title = params.category;
        replaceMeta(config.meta, [
          { property: 'og:title', content: title },
          { property: 'og:url', content: `${url}/category/${title}` },
          { property: 'og:type', content: 'website' },
          { name: 'twitter:title', content: title },
          { name: 'description', content: `${title} 관련 글 리스트입니다` },
          { property: 'og:description', content: `${title} 관련 글 리스트입니다` },
          { name: 'twitter:description', content: `${title} 관련 글 리스트입니다` },
        ]);
        break;
      case '/settings':
        title = '설정';
        replaceMeta(config.meta, [
          { property: 'og:title', content: title },
          { property: 'og:url', content: `${url}/settings` },
          { property: 'og:type', content: 'website' },
          { name: 'twitter:title', content: title },
          { name: 'description', content: '설정 페이지입니다.' },
          { property: 'og:description', content: '설정 페이지입니다.' },
          { name: 'twitter:description', content: '설정 페이지입니다.' },
        ]);
        break;
      case '/login':
        title = '로그인';
        replaceMeta(config.meta, [
          { property: 'og:title', content: title },
          { property: 'og:url', content: `${url}/login` },
          { property: 'og:type', content: 'website' },
          { name: 'twitter:title', content: title },
          { name: 'description', content: '로그인 페이지입니다.' },
          { property: 'og:description', content: '로그인 페이지입니다.' },
          { name: 'twitter:description', content: '로그인 페이지입니다.' },
        ]);
        break;
      case '/join':
        title = '회원가입';
        replaceMeta(config.meta, [
          { property: 'og:title', content: title },
          { property: 'og:url', content: `${url}/join` },
          { property: 'og:type', content: 'website' },
          { name: 'twitter:title', content: title },
          { name: 'description', content: '회원가입 페이지입니다.' },
          { property: 'og:description', content: '회원가입 페이지입니다.' },
          { name: 'twitter:description', content: '회원가입 페이지입니다.' },
        ]);
        break;
      case '/tag/:name':
        title = `${params.name} 태그 검색 결과`;
        replaceMeta(config.meta, [
          { property: 'og:title', content: title },
          { property: 'og:url', content: `${url}/tag/${params.name}` },
          { property: 'og:type', content: 'website' },
          { name: 'twitter:title', content: title },
          { name: 'description', content: `${params.name} 태그 검색 결과 페이지입니다.` },
          { property: 'og:description', content: `${params.name} 태그 검색 결과 페이지입니다.` },
          { name: 'twitter:description', content: `${params.name} 태그 검색 결과 페이지입니다.` },
        ]);
        break;
      case '/portfolio':
        title = '포트폴리오';
        break;
      default:
        replaceMeta(config.meta, [
          { name: 'description', content: description },
          { property: 'og:url', content: url },
          { property: 'og:type', content: 'website' },
          { property: 'og:description', content: description },
          { property: 'og:title', content: config.defaultTitle },
          { name: 'twitter:title', content: config.defaultTitle },
          { name: 'twitter:description', content: description },
        ]);
        break;
    }
  }
  const Meta = () => (
    <Helmet
      htmlAttributes={config.htmlAttributes}
      defaultTitle={title ? '' : config.defaultTitle}
      titleTemplate={config.titleTemplate}
      title={title || 'Main'}
      meta={config.meta}
      link={config.link}
    />
  );
  renderToString(<Meta />);
  return Helmet.rewind();
};

and I use it in app/server.jsx like below

preRenderMiddleware(store.dispatch, props.components, props.params)
        .then(() => {
          const initialState = store.getState();
          const componentHTML = (
            <Provider store={store} key="provider">
              <RouterContext {...props} />
            </Provider>
          );
          const header = makeHeader(props.routes, initialState, props.params); // this is the part which import Meta.jsx
          const finalHTML = `<!DOCTYPE html>${renderToString(
            <Layout header={header} content={componentHTML} initialState={initialState} />
          )}`;
          res.status(200).send(finalHTML);
        })
        .catch((renderError) => {
          console.error('renderError', renderError);
          res.status(500).json(renderError);
        });