反应路由器哈希链接，所有组件都消失了，除了一个点击

如何解决反应路由器哈希链接，所有组件都消失了，除了一个点击

• 我理解正常行为，您希望所有组件都隐藏，而不是被点击的组件。但是对于像 porfolio 这样的应用程序，我想单击导航链接以转到页面的某个部分。很多论坛都提到使用我已经实现的“反应路由器哈希链接”。

• 三个链接，“顶部”、“项目”和“联系方式”。当我点击链接时，果然，它转到了正确的组件。

• 但是，它只显示组件。我想显示所有三个组件，以防用户想要滚动。

在没有解决这个问题的情况下，我查过的所有内容似乎都可以正常工作，也没有具体说明这个问题。

这是我的 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 Router Hash Link 的文档：

当您单击使用 react-router-hash-link 创建的链接时，它将滚动到页面上具有与链接中的 #hash-fragment 匹配的 id 的元素。

在您的 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>

,

正如文档所说，您是新的 BrowserRouter，但您不需要 Switch 和 Route，这会一次渲染一个组件而不是显示所有组件。

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

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

现在它显示了一切。