如何在反应中保护路由？从 http://localhost:3000/#about 到 http://localhost:3000

Question

如何在反应中保护路由？从 http://localhost:3000/#about 到 http://localhost:3000 我正在一个页面上制作一个网站

Answer 1

文件应用程序.js

    // import logo from './logo.svg';
    import './App.css';
    import 'bootstrap/dist/css/bootstrap.min.css';
    import { NavBar } from "./components/NavBar";
    import { Banner } from "./components/Banner";
    import { About } from "./components/About";
    import { Projects } from "./components/Projects";
    import { Contact } from "./components/Contact";
    import { Footer } from "./components/Footer";
    import { Experiences } from './components/Experiences';
    import { FloatButton } from 'antd';
    import { ArrowUpShort } from 'react-bootstrap-icons';
    import { useEffect } from "react";
    
    function App() {
      useEffect(() => {
        var floatButton = document.querySelector(".float-button");
        floatButton.style.display = 'none';
        const onScroll = () => {
          if (window.scrollY > 50) {
            floatButton.style.display = 'block';
          } else {
            floatButton.style.display = 'none';
          }
        }
        window.addEventListener('scroll', onScroll);
    
        return () => window.removeEventListener("scroll", onScroll);
      }, []);
    
      const scrollToTop = () => {
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      };
    
      return (
        <div className="App">
          <NavBar />
          <Banner />
          <About />
          <Experiences />
          <Projects />
          <Contact />
          <Footer />
          <FloatButton className='float-button' icon={<ArrowUpShort style={{ fontSize: 40, marginLeft: -10, }} className='icon-float-button' />} style={{ right: 40, bottom: 40, backgroundColor: '#64ffda', width: '50px', height: '50px' }} onClick={scrollToTop} />
        </div>
      );
    }
    
    export default App;

文件 NavBara.js

    import { useState, useEffect } from "react";
    import { Navbar, Nav, Container } from "react-bootstrap";
    // import logo from '../assets/img/logo.svg';
    import navIcon1 from '../assets/img/nav-icon1.svg';
    // import navIcon2 from '../assets/img/nav-icon2.svg';
    import navIcon3 from '../assets/img/nav-icon3.svg';
    import { HashLink } from 'react-router-hash-link';
    import {
      BrowserRouter as Router
    } from "react-router-dom";
    
    export const NavBar = () => {
    
      const [activeLink, setActiveLink] = useState('home');
      const [scrolled, setScrolled] = useState(false);
    
      useEffect(() => {
        const onScroll = () => {
          if (window.scrollY > 50) {
            setScrolled(true);
          } else {
            setScrolled(false);
          }
        }
    
        window.addEventListener("scroll", onScroll);
    
        return () => window.removeEventListener("scroll", onScroll);
      }, [])
    
      const onUpdateActiveLink = (value) => {
        setActiveLink(value);
      }
    
      return (
        <Router>
          <Navbar expand="md" className={scrolled ? "scrolled" : ""}>
            <Container>
              {/* <Navbar.Brand href="/">
                <img src={logo} alt="Logo" />
              </Navbar.Brand> */}
              <Navbar.Toggle aria-controls="basic-navbar-nav">
                <span className="navbar-toggler-icon"></span>
              </Navbar.Toggle>
              <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="ms-auto">
                  {/* <Nav.Link href="#home" className={activeLink === 'home' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('home')}>Home</Nav.Link> */}
                  <Nav.Link href="#about" className={activeLink === 'about' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('abouts')}>About</Nav.Link>
                  <Nav.Link href="#experience" className={activeLink === 'experience' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('experiences')}>Experience</Nav.Link>
                  <Nav.Link href="#project" className={activeLink === 'project' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('projects')}>Projects</Nav.Link>
                  <Nav.Link href="#connect" className={activeLink === 'connect' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('connect')}>Connect</Nav.Link>
                </Nav>
                <span className="navbar-text">
                  <div className="social-icon">
                    <a href="#" target="_blank"><img src={navIcon1} alt="" /></a>
                    {/* <a href="#"><img src={navIcon2} alt="" /></a> */}
                    <a href="#" target="_blank"><img src={navIcon3} alt="" /></a>
                  </div>
                  <HashLink to=''>
                    <button className="vvd"><span>Resume</span></button>
                  </HashLink>
                </span>
                  </Navbar.Collapse>
            </Container>
          </Navbar>
        </Router>
      )
    }