react router hash link, all components disappear except the one clicked

Question

I understand normal behavior, you want all the components to hide other than the one clicked. But for an app like a porfolio, I want to click a nav link to go to a certain section of the page. A lot of forums mention using "react router hash link", which I've implemented.
Three links, 'top', 'projects', and 'contact'. And when I click the link, sure enough, it goes to the right component.
However, it ONLY shows that components. I want to show all three components incase the user wants to scroll.

Everything I've looked up seems to work fine without addressing this issue, and nothing specifically stating this issue.

Here's my NavBar.js

    import React from 'react';
    import { HashLink } from 'react-router-hash-link';
    import apps from '../project.json';
    import { categories } from '../helpers/categories';
    import '../styling/navbar.css';


    export const NavBar = ({selectFromNav}) => {

     // event handlers 

      return (
        <nav className="navbar-wrapper" id="top">
            <input type="checkbox" id="check" />
            <label htmlFor="check" className="hamburger-button"><i className="fas fa-bars"></i></label>
          <ul className="navbar-ul">
            <div className="navlink"><a href="https://github.com/Sebastian-Russo" rel="noreferrer" target="_blank">Github</a></div>
            <div className="navlink"><HashLink smooth to="top">Top</HashLink></div>
            <div className="navlink"><HashLink smooth to="projects">Projects</HashLink></div>
            <div className="navlink"><HashLink smooth to="contact">Contact</HashLink></div>
            <div className="navlink">Total Projects: {apps.length}</div>
          </ul>
        </nav>
      )
    }

here's my App.js

    import React,{ useState } from 'react'; 
    import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
    import { AppWrapper } from './app-wrapper';
    import { NavBar } from './navbar';
    import { About } from './about';
    import { Footer } from './footer';
    import projects from '../project.json';
    import '../styling/App.css';

    const App = () => {
      
      // event handlers and other js logic 

      return (
        <Router>
          <div className="App">
            <NavBar selectFromNav={selectFromNav} />

            {/* <About />
            <AppWrapper selected={selected} />
            <Footer /> */}

            <Switch>

              <Route path="/top" component={About} />

              <Route path="/projects" render={props => 
                  <AppWrapper {...props} selected={selected} />
                }/>

              <Route path="/contact" component={Footer}
                  // scroll={(el) => el.scrollIntoView({ behavior: 'instant', block: 'end' })}
              />
            
            </Switch>
            
          </div>
        </Router>
      );
    }

    export default App;

score 0 · Answer 1 · answered Mar 19 '21 at 23:31

0

According to the documentation of React Router Hash Link:

When you click on a link created with react-router-hash-link it will scroll to the element on the page with the id that matches the #hash-fragment in the link.

in your NavBar.js you're not using the # for your links,

<div className="navlink"><HashLink smooth to="#top">Top</HashLink></div>
            <div className="navlink"><HashLink smooth to="#projects">Projects</HashLink></div>
            <div className="navlink"><HashLink smooth to="#contact">Contact</HashLink></div>

answered Mar 19 '21 at 23:31

Reda

86
5

Thank you. I tried, that. I took it out because everything disappears after that. nothing shows in the App.js component. I want everything to show in the App.js componet (all three components) regardless of being clicked or not. So the main question is, why are they not showing up? – Seb Mar 20 '21 at 00:05
As the docs say, you new BrowserRouter, BUT you DO NOT need Switch and Route, which would render one component at a time rather than showing all. That plus your suggestion of adding #, made it work – Seb Mar 20 '21 at 00:09
1

ah yes sry , i didn't answer your main question, it was mainly because of switch which renders only 1 component. im glad it worked out – Reda Mar 20 '21 at 00:14

score 0 · Answer 2 · answered Mar 20 '21 at 00:09

As the docs say, you new BrowserRouter, BUT you DO NOT need Switch and Route, which would render one component at a time rather than showing all.

      <Router>
        <div className="App">
          <NavBar />

          <About />
          <AppWrapper selected={selected} sortProjects={sortProjects} />
          <Footer />
          
        </div>
      </Router>

Now it shows everything.

react router hash link, all components disappear except the one clicked

2 Answers2