CODEWITHSUNDEEP
htmlflutterurlflutter-web
Pen Drive
Pen Drive

Reputation: 93

why using the path URL strategy on my flutter web breaks my navigation?

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?

Upvotes: 1

Views: 1725

Answers (3)

posheng cheng
posheng cheng

Reputation: 1

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

Upvotes: 0

Pen Drive
Pen Drive

Reputation: 93

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

Upvotes: 4

Omar Qataberi
Omar Qataberi

Reputation: 138

"#" in URLs is replaced with "%23"

check here to see more ASCII characters in URL-encoding

Upvotes: 0

Related Questions