feat(SkipToContent): Update skip to content to support react router

[jessiehuff]

What: Closes #4809

[patternfly-build]

PF4 preview: https://patternfly-react-pr-4831.surge.sh
A11y report: https://patternfly-react-pr-4831-coverage.surge.sh

[tlabaj]

Can you add new prop to demo app please and add an integration test.

[tlabaj]

LGTM

[redallen]

I don't see a SkipToContent anywhere in OpenShift, but if there was one my guess is that it has href="/#main-content" instead of href="#main-content" which is causing your undesired behavior.

All react-router does in addition to the default browser behavior for hash links of document.getElementById('main-content').scrollTo() is check to see which route it should render, which should always be the same if not using a HashRouter. In the case of SkipToContent we should always want the browser behavior to take place, not a router's.

I'm happy to help you debug.

[jessiehuff]

Sure @redallen! Definitely interested in any insight you might have. This is the PR I had with OpenShift trying to add the Skip to Content. I was attempting to do: href={'#content'}

[redallen]

It doesn't work because of the <base href="/" /> tag that OpenShift includes. Try this instead:

<SkipToContent href={`${this.props.location.pathname}#content`}>Skip to Content</SkipToContent>`

[jschuler]

@redallen react-router has some issues with hash links afaik. see remix-run/react-router#394 (comment)
I think that is the main reason openshift uses https://www.npmjs.com/package/react-router-hash-link