Hash Anchor Does Not Work

The method here
https://github.com/USACE/swt-wm-web/blob/a8a18dba499885d9e71e5940ce33f37f722d4605/src/app-bundles/route-utility-bundle.js#L6

https://github.com/USACE/swt-wm-web/blob/a8a18dba499885d9e71e5940ce33f37f722d4605/src/App.jsx#L36

is preventing users from using HTML Anchor Elements in their pages.

If you comment the lines out it will allow the page to route there, but then React does not seem to jump to the element.

These appear two be two separate issues

I imagine because the DOM is rendered after and that leaves the user to decide how the hash is handled (React). And then redux bundler for client-side routing which was causing a duplicate path issue.
i.e. /swt/swt/some/path#anchor whenever a user did not put target="_blank" to their <a> tags.

JavaScript for jumping to the anchor element

The workaround we went with was to run a useConnect for selectHash and feed that hash into a document.getElementById in a useEffect to trigger a scroll to. Setting the useEffect to update when hash from selectHash updates.

Fixing the duplicate base path

This also required minor tweaking of the route-utility-bundle method to ensure if the base already existed in the url to just go with the url.

Wondering if we should somehow incorporate this into Groundwork or if districts will all need to add these to their various files in their repo.

this is probably not an issue with Groundwork itself, but instead the implementation of it and a question if Groundwork can help solve it.

Start with src/app-bundles/route-utility-bundle.js at the linked method and src/App.jsx at the linked code, then review the described hash and base-path handling. Determine whether Groundwork or district applications should own the behavior. Done means the ownership is decided and anchor navigation works without producing a duplicate base path.