2

当我单击导航栏中的特定项目时，似乎根本没有触发器，有一次它有点工作，当我单击 li 时，url 至少发生了变化，但现在即使这样也不起作用。

除此之外，我还为每个组件设置了 ID。

这是 App.js

import React, { useState } from 'react';

import logo from './icons/logo.svg';

import Landing_Nav from './pages/landing/Landing_Nav';
import Landing_Hero from './pages/landing/Landing_Hero';
import Landing_Organization from './pages/landing/Landing_Organization';
import Landing_Toolkit from './pages/landing/Landing_Toolkit';
import Landing_Idea from './pages/landing/Landing_Idea';

import './styles/root.scss';

function App() {
    return (
        <div className="landing_content">
            <Landing_Nav />
            <Landing_Hero />
            <Landing_Organization />
            <Landing_Toolkit />
            <Landing_Idea />                      
        </div>
    )
}

export default App;

这是 Landing_Nav.js

import React, { useState } from 'react';

import logo from '../../icons/logo.svg';

import '../../styles/root.scss';
import '../../styles/landing-navigation.scss';

import { Link } from "react-scroll";

function Landing_Nav() {
    return (
        <div className="navigation">
            <img src={logo} className="logo-img"/>
            <div className="nav-right-content">
                <ul className="nav-on-page">
                    <Link
                        activeClass=""
                        to="organization-link"
                        spy={true}
                        smooth={true}
                        offset={-70}
                        duration= {500}
                    ><li>Organization</li></Link>                              
                </ul>
                <button className="btn-primary">Create Together</button>
            </div>
        </div>                                  
    )
}

export default Landing_Nav;
4

1 回答 1

0

在您的Landing_Organization组件内部，您id将该组件的 设置为"organization-link"。我相信您需要将name属性设置"organization-link"为 react-scroll 库才能按预期工作。

于 2021-12-28T01:29:33.473 回答