Блог

• Я понимаю нормальное поведение, вы хотите, чтобы все компоненты скрывались, кроме того, на который нажали. Но для такого приложения, как порфолио, я хочу щелкнуть навигационную ссылку, чтобы перейти в определенный раздел страницы. На многих форумах упоминается использование «хэш-ссылки маршрутизатора react», которую я реализовал.
• Три ссылки: «топ», «проекты» и «контакты». И когда я нажимаю на ссылку, конечно же, она переходит к нужному компоненту.
• Однако он показывает ТОЛЬКО эти компоненты. Я хочу показать все три компонента, если пользователь захочет прокрутить.

Все, что я просмотрел, кажется, работает нормально без решения этой проблемы, и ничего конкретно не указывает на эту проблему.

Вот мой 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>
      )
    }
 

вот мой 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;
 

Согласно документации по хэш-ссылке маршрутизатора React:

Когда вы нажимаете на ссылку, созданную с помощью react-router-hash-link, она прокручивается до элемента на странице с идентификатором, соответствующим фрагменту #hash в ссылке.

в вашем NavBar.js вы не используете # для своих ссылок,

 <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>
 

Как говорится в документах, у вас новый браузер, НО вам НЕ нужны переключатель и маршрут, которые отображали бы один компонент за раз, а не показывали все.

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

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

Теперь это показывает все.