How to use links with React BrowserRouter (react-router)

[durzo]

The demos all seem to use hash routing, but for my SPA i want to use a BrowserRouter so pages have "real" links (e.g foo.com/page1)

Problem is I can't see how to use ReactRouter's <Link> component with things like the <SideNavigation> component - links are done by specifying a href="/page1" property ( https://cloudscape.design/components/link/?tabId=api#properties ) but this causes a new browser request for each link instead of using the Router and my whole app is fetched again.

One solution I thought of was to have each href="#" and use onFollow events for every link use ReactRouter's navigate(), but that seems like a crazy amount of work just to have a BrowserRouter.

Any ideas?

[quisido]

You can implement a custom onFollow event handler like so: https://github.com/CharlesStover/use-awsui-router/blob/main/src/hooks/use-link.ts