реагировать на хэш-ссылку маршрутизатора, все компоненты исчезают, кроме того, по которому щелкнули

Question

• Я понимаю нормальное поведение, вы хотите, чтобы все компоненты были скрыты, кроме того, который был нажат. Но для такого приложения, как портфолио, я хочу щелкнуть навигационную ссылку, чтобы перейти в определенный раздел страницы. На многих форумах упоминается использование "хеш-ссылки реактивного маршрутизатора", которую я реализовал.

• Три ссылки: «топ», «проекты» и «контакт». И когда я нажимаю ссылку, она, конечно же, переходит к нужному компоненту.

• Однако он ТОЛЬКО показывает, что компоненты. Я хочу показать все три компонента, если пользователь хочет прокрутить.

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

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

Answer 1

Согласно документации React Router Hash Link:

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

в вашем 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>

Answer 2

Как говорится в документации, вы новый BrowserRouter, НО вам НЕ нужны Switch и Route, которые будут отображать один компонент за раз, а не отображать все.

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

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

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