CODEWITHSUNDEEP
javascriptreactjsnavbarreact-router-dom
Geoffrey Hutson
Geoffrey Hutson

Reputation: 157

Navigation for a SPA React Portfolio

I am working on my portfolio, and for the life of me cannot remember the proper way to set up navigation for a Single Page Application

here is the navbar for the app

    <div id="wrappper">
      <div id="nav-wrapper">
        <div id="myName">
          <h6>Geoffrey Hutson</h6>
        </div>
        <div className="navBar">
          <ul className="navBarList">
            <li className="navBarItems">
              <NavLink to="/">Home</NavLink>{" "}
            </li>
            <li className="navBarItems">
              <NavLink to="/about">About </NavLink>
            </li>
            <li className="navBarItems">
              <NavLink to="/skills">Skills</NavLink>
            </li>
            <li className="navBarItems">
              <NavLink to="/portfolio">Portfolio</NavLink>
            </li>
            <li className="navBarItems">
              <NavLink to="/contact">Contact</NavLink>
            </li>
          </ul>
        </div>
      </div>
    </div>

my App.js

 <Router>
      <div className="App">
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/about" component={About} />
        </Switch>
      </div>
    </Router>

and finally my index.js

  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.querySelector("#root")

the url changes when clicked but the page does not jump to where I want it to go, I am pretty sure it's a flaw in how I have set up my component. But not sure

Upvotes: 0

Views: 239

Answers (1)

Daniel Duong
Daniel Duong

Reputation: 1104

You need to re-order like so:

<Router>
  <div className="App">
    <Switch>
      <Route exact path="/about" component={About} />
      <Route exact path="/" component={Home} />
    </Switch>
  </div>
</Router>

From my experience the ordering matters. I could be wrong. But give that a go

Upvotes: 1

Related Questions