Anchor: History API navigation

[vankhoawin]

In our team's migration to Paste Anchors, it seems like client-side navigation (e.g. navigation via History API) is not supported. Assuming that decision was to stay decoupled from any third-party navigations libraries, would it be possible to support client-side navigation with a plugin system like material UI?

https://material-ui.com/guides/composition/#routing-libraries

[SiTaggart]

Hi @vnguyen94, you're right we don't want the presentational component to be tied to any particular routing implementation. Ideas and preferences change over time, and we're really only concerned with the component being an HTML anchor element that has certain styles attached to it. So we leave the routing library of choice up to the consumer.

I am curious though on the preference of the Paste anchor being the accommodator of the routing library.

As an example react router has 2 mechanisms you could hook into, that accommodates other React components to be used with the library. Firstly is the Link component takes a component prop, where you can pass it a styled component. https://reactrouter.com/web/api/Link/component-reactcomponent. I'm assuming you could just pass it the Paste Anchor. 🤞

The second option is the withRouter HOC https://reactrouter.com/web/api/withRouter.

These hopefully should work just fine with our Anchor and save us the problem of trying to type the component to an unspecified API. For example, if we were to expose the as prop and allow rendering the Anchor as a react-router Link element, we'd need to type Anchor to accept any prop the react router Links expects. If this changes over time, or we need to support other routing libraries our typings become pretty difficult to maintain, or we just any it and they become not very helpful.

If we reverse that, and expect our Anchor to work with other routing libraries as a consumable, that seems like the most flexibility we could provide in the long term to the library.

[vankhoawin]

Firstly is the Link component takes a component prop, where you can pass it a styled component. https://reactrouter.com/web/api/Link/component-reactcomponent. I'm assuming you could just pass it the Paste Anchor. 🤞

oh interesting, didn't even know they had this! i'll try checking it out

The second option is the withRouter HOC https://reactrouter.com/web/api/withRouter.

this one seems a little too heavyweight for me, but i'll also try it out if the first option doesn't work, thanks!