href vs Link React? JS is not loading based on HTML tags

Question

I am trying to understand if this is a REACT or css issue eg. I have the following code below in React component:

       <div className="left">
        <Link to="/" className="brand">
          <img src={Logo} alt="" />
        </Link>
      </div>

      <div className="right">
        <div className="primary-nav">
          <ul className="navigation">
            <li className="active">
              <Link to="/">Home</Link>
            </li>
          </ul>
        </div>
      </dic>

The first link does not work, mainly if the Link element is wrapped in Div or any other it looks like it is not reloading the page correctly. Eg Some .js files are not loaded, pictures in the dom, hence page is not working properly. While if I use the second link all works as expected. I don't see a difference in React, hence looks to me a CSS issue?

Once I wrapped the first div element as per below, this worked.

      <div className="primary-nav">
        <ul className="left">
          <li>
            <Link to="/index.html" className="brand">
              <img src={Logo} alt="" />
            </Link>
          </li>
        </ul>
      </div>

Moreover if I replace this Link to a and href element then this works as well!

I am not sure if this would be related as Css issue, and if so, then why would that affect the page reload? Or if this is something straightforward React experts see and is easily fixed?

Answer 1

Don't consider Your React code as a Simple HTML . Actually the thing is That react Uses a JSX code . that mean it bit different Than original html . yaa that is true that at the last React convert jsx code into a Html . but internally react manage a JSX elements .

Now We are Going to your Point href and Link are different thing cause href is html property that uses html default javascript or you can say core javascript but Link mean you are tracking something or we can say manage something using your own javascript . See Notice One Thing that when you are using a href your page will refresh and when you are using a Link than it may be it will not refresh your whole Dom depends on your coding but when your are working with react you need to use Link for better practice . it will also improve a quality of your web application.