响应路由器散列链接，除单击的组件外，所有组件都会消失。

Question

• I理解正常行为，除了单击的组件之外，您希望所有组件都隐藏起来。但是对于像porfolio这样的应用程序，我想点击一个导航链接到页面的某个部分。很多论坛都提到使用"react路由器散列链接“，这是我实现的.

• 三个链接，'top'，'projects‘和'contact’。当我单击该链接时，它一定会转到正确的组件.

。

然而，

• 只显示了组件。我想显示这三个组件，以防用户想要滚动.

我查到的每件事似乎都很好，但没有提到这个问题，也没有具体说明这个问题。

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

当您单击使用react路由器-散列链接创建的链接时，它将滚动到页面上的元素，该元素的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>

Answer 2

正如文档所述，您需要新的BrowserRouter，但是您不需要切换和路由，这将一次呈现一个组件，而不是显示所有组件。

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

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

现在它显示了一切。