React-router use: instanciate the router outside of the react tree, and stop using hashes for our URLs

julienw commented 8 months ago

Please look at the last commits only, as the first commits are #582.

This does these (fairly unrelated) things:

Commit 1: instanciate the router outside of the react tree, like advised by the react router documentation, so that we don't regenerate one at each rerender. This should improve performance. This wasn't so easy before because we had to get the theme from a hook and pass it as a parameter, but thanks to #590 this is now possible.
Commit 2: this uses createBrowserRouter instead of createHashRouter. This makes more natural URLs without the # character. https://perf.compare/#/compare-results will be now just https://perf.compare/compare-results. Or in the deploy preview https://deploy-preview-597--mozilla-perfcompare.netlify.app/compare-results?fakedata=true. (A quick note here: I noticed that adding a / after compare-results doesn't work, and we don't even have a 404 page. I'll look at it later)
Commit 3: for the browser router to work, we need to configure netlify though, and this commit does just that. See https://docs.netlify.com/routing/redirects/rewrites-proxies/#history-pushstate-and-single-page-apps for more information about that.

netlify[bot] commented 8 months ago

Deploy Preview for mozilla-perfcompare ready!

Name	Link
Latest commit	4258290807f39970141a9dde1fd4ef3441c128bb
Latest deploy log	https://app.netlify.com/sites/mozilla-perfcompare/deploys/65b93115eb28ba00089c69ea
Deploy Preview	https://deploy-preview-597--mozilla-perfcompare.netlify.app/
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

codecov[bot] commented 8 months ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Comparison is base (7db3cd9) 92.53% compared to head (4258290) 92.54%.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## beta #597 +/- ## ======================================= Coverage 92.53% 92.54% ======================================= Files 62 62 Lines 1394 1395 +1 Branches 217 217 ======================================= + Hits 1290 1291 +1 Misses 100 100 Partials 4 4 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

mozilla / perfcompare