ReactJS：通过React Router dom转到HTML中的锚定链接

Question

I am developing an app with patch notes where I have url's with the following structure defined with React Router:

<Route path='/updates/:id?' render={(params) => <Updates {...params} />}></Route>

I want to allow user to go to a specific part of the document if the url contains a hash part like this /updates/1#index . Here, the #index part of the url should send the user to the div with id='index' just like normal HTML.

I read about hashRouter with normal HTML for {content} but it didn't work as I expected or required:

<HashRouter>
  {content}
</HashRouter>

How can I achieve this?

Answer 1

Perhaps you could use Element#scrollIntoView() to mimic the default browser behavior of anchor link.

For instance, if <Updates /> is the component that hosts your patch note content (where anchor links are defined), then you could run this function when <Updates /> is mounted or started to achieve this:

function scrollToHash() {

    /* Obtain hash from current location (and trim off leading #) */
    const id = window.location.hash.substr(1);

    if(id) {
        /* Find matching element by id */
        const anchor = document.getElementById(id);

        if(anchor) {
            /* Scroll to that element if present */
            anchor.scrollIntoView();
        }
    }
}

/* Usage example */
function Updates() {

    React.useEffect(() => {
        scrollToHash();
    },[]);

    /* Render patch content that contains anchors */
    return <div> ... </div>
}