title: Is there some way I can convert href tag to Link on React.js?
body: <p>Thank you for opening this page in advance.
  I am a self-taught coder. And now I am making my personal page with Bootstrap.</p>
  <p>What I want to do now is; SPA feature of React.js. All I understand this feature is;</p>
  <ol>
  <li>install &quot;react-router-dom&quot;,</li>
  <li>import { Link, NavLink } from &quot;react-router-dom&quot;;</li>
  <li>And replace those anchor  and href tag to <strong>Link to=</strong></li>
  </ol>
  <p>The following code is in 'src' folder.</p>
  <p>Navbar.js</p>
  <pre><code>import React from &quot;react&quot;;
  import logoImage from &quot;../components/logo.png&quot;;
  // React fontawesome imports
  import { FontAwesomeIcon } from &quot;@fortawesome/react-fontawesome&quot;;
  import { faBars } from &quot;@fortawesome/free-solid-svg-icons&quot;;
  import { Link, NavLink } from &quot;react-router-dom&quot;;
  
  
  
  const Navbar = () =&gt; {
      return (
          &lt;nav className=&quot;navbar navbar-expand-lg navbar-light bg-white&quot;&gt;
          &lt;div className=&quot;container-fluid&quot;&gt;
  
              &lt;a className=&quot;navbar-brand mr-auto&quot; href=&quot;#&quot;&gt;&lt;img className=&quot;logo&quot; src={logoImage} alt=&quot;logoImage&quot;/&gt;&lt;/a
              &lt;button 
              className=&quot;navbar-toggler&quot; 
              type=&quot;button&quot; 
              data-bs-toggle=&quot;collapse&quot; 
              data-bs-target=&quot;#navbarSupportedContent&quot; 
              aria-controls=&quot;navbarSupportedContent&quot; 
              aria-expanded=&quot;false&quot; 
              aria-label=&quot;Toggle navigation&quot;
              &gt;
                  &lt;FontAwesomeIcon icon={faBars} style={{ color: &quot;#2ff1f2&quot; }}/&gt;
              &lt;/button&gt;
  
              &lt;div className=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
                  &lt;ul className=&quot;navbar-nav ml-auto&quot;&gt;
                      &lt;li className=&quot;nav-item&quot;&gt;
                          &lt;a className=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;../components/About&quot;&gt;About me&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li className=&quot;nav-item&quot;&gt;
                          &lt;a className=&quot;nav-link&quot; href=&quot;#&quot;&gt;Thoughts&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li className=&quot;nav-item&quot;&gt;
                          &lt;a className=&quot;nav-link&quot; href=&quot;#&quot;&gt;Portfolio&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li className=&quot;nav-item&quot;&gt;
                          &lt;a className=&quot;nav-link&quot; href=&quot;#&quot;&gt;Contacts&lt;/a&gt;
                      &lt;/li&gt;
  
                  &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;/nav&gt;
                  )
              }
  
  export default Navbar;
  
  </code></pre>
  <p>App.js</p>
  <pre><code>import './App.css';
  import &quot;bootstrap/dist/css/bootstrap.min.css&quot;;
  import Button from &quot;react-bootstrap/Button&quot;;
  import Particles from &quot;react-particles-js&quot;;
  import Navbar from &quot;./components/Navbar&quot;;
  import Header from &quot;./components/Header&quot;;
  import About from &quot;./components/About&quot;;
  
  function App() {
    return (
      &lt;&gt;
        &lt;Particles
          className=&quot;particles-canvas&quot;
            params={{
              particles: {
              number: {
              value: 30,
              density: {
              enable: true,
              value_area: 900
              }},
              shape: {
              type: &quot;star&quot;,
              stroke: {
              width: 6,
              color: &quot;#f9ab00&quot;
              }}}}}
        /&gt;
        &lt;Navbar /&gt;
        &lt;Header /&gt;
        &lt;About /&gt;
      &lt;/&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>Header.js</p>
  <pre><code>import React from &quot;react&quot;;
  import Typed from &quot;react-typed&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  
  const Header = () =&gt; {
      return (
          &lt;div className=&quot;header-wraper&quot;&gt;
              &lt;div className=&quot;main-info&quot;&gt;
                  &lt;h1&gt;Welcome, this is my own personal page&lt;/h1&gt;
                  &lt;Typed
                      className=&quot;typed-text&quot;
                      strings={[&quot;text message to display in the centre of the page&quot;]}
                      typeSpeed={80}
                  /&gt;
                  &lt;a href=&quot;#&quot; className=&quot;btn-main-offer&quot;&gt;Details&lt;/a&gt;
  
  
  
          &lt;/div&gt;
      &lt;/div&gt;
      )
  }
  
  export default Header;
  </code></pre>
  <p>And soon as I replace</p>
  <pre><code>&lt;a className=&quot;nav-link&quot; href=&quot;#&quot;&gt;Thoughts&lt;/a&gt; 
  </code></pre>
  <p>to</p>
  <pre><code>&lt;Link to=&quot;../components/About&quot;&gt;Thoughts&lt;/Link&gt;
  </code></pre>
  <p>It stops working with this following error message.</p>
  <pre><code>×
  Error: Invariant failed: You should not use &lt;Link&gt; outside a &lt;Router&gt;
  invariant
  C:/Users/Administrator/my-portfolio/node_modules/tiny-invariant/dist/tiny-invariant.esm.js:10
  (anonymous function)
  C:/Users/Administrator/modules/Link.js:88
    85 | return (
    86 |   &lt;RouterContext.Consumer&gt;
    87 |     {context =&gt; {
  &gt; 88 |       invariant(context, &quot;You should not use &lt;Link&gt; outside a &lt;Router&gt;&quot;);
       | ^  89 | 
    90 |       const { history } = context;
    91 | 
  </code></pre>
  <p>My understanding to this error is:</p>
  <ol>
  <li>I should make Router.js file in src folder.</li>
  <li>I should just start again without Bootstrap first. Once SPA feature is done, then I can start work on this CSS feature as CSS in JS (e.g. const something = div.styled ``;)</li>
  </ol>
  <p>I know this sounds ridiculous, but this is the best option I could think for now.</p>
  <p>Question is, <strong>Where should I begin investigating this error message?</strong></p>
  <p>I am currently relying on this document page to remove the error message.
  1st Example: Basic Routing - <a href="https://reactrouter.com/web/guides/quick-start" rel="nofollow noreferrer">https://reactrouter.com/web/guides/quick-start</a></p>
  <p>I would appreciate your opinion. Thank you.
  If I found a solution, I will update it with mine here.</p>