flutter 웹 url 주소에 # 없애는 방법 (해시 라우팅)

#1. 문제

flutter를 이용해 크롬 같은 웹 앱을 만들다보면 이상한 점이 있다.

이런식으로 url에 '#'이 포함된다. 

이렇게 표시되는 이유는, flutter는 SPA(Single Page Application) 이기 때문에 다른 frontend 개발 툴과는 기본 라우팅(Routing) 방식이 다르기 때문이다.

#2. 배경지식

라우팅에는 크게 2가지가 있다.

 

#2-1.  HTML5 path 라우팅  ex) https://kimp.info/about-page   

우리가 알고있는 일반적인 방식이며 대부분의 frontend 개발툴은 자동으로 html5 path기반으로 만들어진다. SSR(Server Side Rendering) 방식의 웹개발인 경우는 모든 페이지를 서버에서 프론트로 전달받아서 프론트는 화면에 띄우는 역할만 하게된다.

#2-2. 해시 라우팅 ex) https://kimp.info/#/about-page

반면 flutter와 같은 SPA 방식 프론트앤드 개발시 index.html 단 한페이지(그래서 Single Page Application인듯)만 서버에서 받고 이후 웹사이트 내에서 여러 페이지로 이동할때 그 모든 페이지들은 프론트에서 동적으로 생성하게 되는 것이다.

기런경우 기본 페이지 kimp.info 만 서버에서 받게되고, '/about-page' 와 같은 다른 페이지는 프론트에서 생성을 하게되서

이를 구분하기위해 해시라우팅 방식으로 https://kimp.info/#/about-page  이렇게 '#'을 통해 구분시켜준다.

즉, 어떤 웹사이트를 들어갔는데 메인 페이지 외에 어떤 페이지의 url에 저렇게 '#'이 포함되있다면 그 페이지는 서버에서 가져온 것이 아니라 프론트앤드에서 자동으로 생성된 화면이라고 이해하면 된다.

---------------------------

#3. 해결책

flutter를 통해 개발할때 웹 url에 '#'을 포함하게 되면 구글 봇이 크롤링을 하지 못하고, SEO 최적화도 어렵기 때문에

'#'을 업애는게 좋다.

이를 위해 여러가지 방법이 있어왔다. 문제는.. flutter의 수많은 package들이 버전도 업그레이드 되고, 어떤 package들은 deprecated 되거나 discontinued 되는등 사라지기도 하면서 계속 방법이 바뀌는 것이다. gpt도 일반적으로 최신 정보가 학습되지 않기 때문에 잘못된 답변을 주는 경우가 많다. 이 문제에 대해 gpt에 물어보면 GoRouter 위젯 내부 속성에서 urlPathStrategy: UrlPathStrategy.path 을 추가하라는 답변을 주고 있는 걸 확인할 수 있었다.

하지만 urlPathStrategy는 deprecated 되었기 때문에 문제가 해결되지 않는다.

현재 시점에서 가장 단순한 방법은 아래와 같이 설정 하는 것이다.

void main() {
  setUrlStrategy(PathUrlStrategy());
  runApp(MyApp());
}

 

setUrlStrategy(PathUrlStrategy());

한줄이면 해결된다.