页面不会使用 react-scroll 滚动答案

【问题标题】：Page won't scroll with react-scroll页面不会使用 react-scroll 滚动
【发布时间】：2021-12-29 09:21:34
【问题描述】：

当我点击导航栏中的特定项目时，似乎根本没有触发器，有一次它有点工作，当我点击 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;

【问题讨论】：

你能分享Landing_Organization组件吗？
我附上了它@BitSteven，这可能是一些愚蠢的问题......这是我第一次做 React - 我是产品设计师，只是想构建我自己的产品imgur.com/gallery/Sy2ln1z
另外，当我运行 npm start 时，一切正常，但导航链接没有任何作用，如果我打开控制台并单击某些东西 - 再次，没有任何反应

标签： reactjs react-scroll

【解决方案1】：

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

【讨论】：