4년전에 업데이트된 React-router-sitemap

 

npm 공식 예제만으로도 문제없이 사용 가능합니다.
이 기록은 뻘짓입니다. 반성하기 위해 박제 합니다.

SEO를 개선시키기위해   React-router-sitemap 라이브러리를 사용하기도 했다

 

사용 이유는 레퍼런스가 가장 많았고 다운수도 높았다.

 

1. 설치

npm install --save react-router-sitemap

2. sitemapRoutes.js 파일 생성

기존에 라우트 컴포넌트 파일이 존재하면 

그 파일로 react-router-sitemap 실행시 babel 이슈가 발생한다고한다

동일한 코드를 담은 sitemap-router.js 를 하나 만들었다

 

3. sitemapGenerator.js 파일 생성

sitemap.xml 파일을 생성하는 sitemapGenerator.js  파일을 만들어야한다

require('babel-register');
 
const router = require('./router').default;
const Sitemap = require('../').default;
 
(
    new Sitemap(router)
        .build('http://my-site.ru')
        .save('./sitemap.xml')
);

require("babel-register")({
  presets: ["es2015", "react"]
});
 
const router = require("./sitemapRoutes").default; // 좀 전에 만든 sitemapRoutes 파일이 있는 경로입니다.
const Sitemap = require("react-router-sitemap").default;

function generateSitemap() {
    return (
      new Sitemap(router)
          .build("https://www.example.com") // 여러분의 도메인 이름으로 변경해주세요.
          .save("./public/sitemap.xml") // sitemap.xml 파일이 생성될 위치입니다.
    );
}

generateSitemap();

공식문서와 여러 레퍼런스를 보면  이렇게 babel-register require후 es2015문법 ,jsx를 트랜스파일링하기위해 포함시키는데

굳이 그럴 필요가 없다. 오래된 레퍼런스에 babel 참조형식이 지금과는 버전업이되어 다르기에 (@babel/core ...등) 다 바꿔줘야한다.

 

import Sitemap from 'react-router-sitemap';
import router from './sitemap-router';

function generateSitemap() {
  return new Sitemap(router)
    .build('https://sinple.co.kr')
    .save('./public/sitemap.xml');
}

generateSitemap();

이렇게만 해줘도 public에 아주 잘 생성된다!

혹시나 jsx나 es2015문법이 페이지내에 필요하신 분이라면

require('@babel/register')({
	presets: ['@babel/preset-env', '@babel/preset-react'],
});

를 추가해주시면 된다.

 

 

preset-env로 권장 되었기 때문!

 

이후 

5. sitemapGenerator.js 파일 실행

설치가 완료되면 package.json 파일을 다음과 같이 수정후 네이버 나 구글 서치어드바이저를 통해 진단 해보면 된다

... 
  "scripts": {     
    ...     
    "sitemap": "babel-node path/to/your/sitemaGenerator.js"   
  } 
...