react-router with context - why doesn't it work the same with anchor vs Link

I have the below sample code using react-router and context hooks where I am trying to understand why it behaves differently when I use anchors instead of Link components. The Link components are commented out.

This app just simply displays a screen with an html link where you can click it to display component 2 (component 1 is displayed initially). I am updating the context value in the onClick event for the anchor (I use the setName function to update the name in the context).

When I use anchor tags, it doesn't keep the context value that was updated. So when it goes to component2, the name value in the context displays as person1. However, if I comment out the anchors and use the Link components instead, the context value is updated properly.

Why do the Link components work as expected but not the anchors when updating context?

import React, { useContext, useState } from 'react';  import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';  import { useHistory } from 'react-router-dom';    const NameContext = React.createContext();    function App() {    const [name, setName] = useState('name1');      return (      <NameContext.Provider value=>        <Router>          <Route exact path="/" component={Component1} />          <Route exact path="/component1" component={Component1} />          <Route exact path="/component2" component={Component2} />        </Router>      </NameContext.Provider>    );  }    function Component1() {    const { name, setName } = useContext(NameContext);    const history = useHistory();      return (      <>        <div>This is component 1, name = {name}</div>        <a href="/component2" onClick={() => setName('name2')}>          Click to display component 2        </a>        {/* <Link          onClick={() => setName('name2')}          to={(location) => {            return { ...location, pathname: '/component2' };          }}        >          Click to display component 2        </Link> */}      </>    );  }    function Component2() {    const { name, setName } = useContext(NameContext);    const history = useHistory();      return (      <>        <div>This is component 2, name = {name}</div>        <a href="/component1" onClick={() => setName('name3')}>          Click to display component 1        </a>        {/* <Link          onClick={() => setName('name3')}          to={(location) => {            return { ...location, pathname: '/component1' };          }}        >          Click to display component 1        </Link> */}      </>    );  }    export default App;  

https://stackoverflow.com/questions/65402362/react-router-with-context-why-doesnt-it-work-the-same-with-anchor-vs-link December 22, 2020 at 10:00AM