Using hashes in social media share buttons is almost impossible, so I wanted to get rid of the # in my flutter web url path, the problem is that when I do that, my navigation that I set with onRoute breaks and can't find the webpage, I thought it was a surge problem but even when I deploy it on firebase configuring it to be a Single Page Application I have the same problem. I'm really struggling here.. I have no more ideas, do you?
3 Answers
Okay, I'm answering my own question to make the travel easier for future developers with the same question. Flutter path url strategies seem to break under subdomains, using websites like surge, Firebase hosting or netlify make your navigation stop working when you are using pathURlStrategy().
Using a real domain fix the problem for me
1 Comment
Beginner_
Yeah this helped me. thank you Pen! Just removed setUrlStrategy(PathUrlStrategy());
"#" in URLs is replaced with "%23"
check here to see more ASCII characters in URL-encoding
1 Comment
Pen Drive
I know it should, but if I replace my # with %23 breaks my navigation on the flutter web application
The reason why single page app doesn't work on static website hosting services like Firebase hosting or Netlify is because website server always tries to respond with a file like \path\in\the\url.html or something when the user is trying to access a url like https://www.hostname.path/in/the/url. However, in the case of a single page web app, the index.html should always be returned by the server no matter the url the user is trying to access. This can be achieved by modifying the redirecting rule of the website server using the _redirect file in the root of your website as outlined here.
For Netlify deployment, simply add a netlify.toml file to the deploy directory (build\web\ for Flutter) with the following content:
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
