Reactjs：从导航栏组件导航到组件而不使用数据文件

Question

我是 React 新手，正在学习 React 教程。我对如何在不使用我在遵循教程时创建的数据文件的情况下将我的 Accordion 组件定向到路径感到困惑。一般来说，我希望用户点击导航栏中的“FAQ”并被发送到 Accordion 组件。

感谢您帮助我进一步了解 React！

导航栏：

import React, {useState, useEffect} from 'react';
import { NavLink } from 'react-router-dom';
import { FaBars } from "react-icons/fa";
import {Nav, ExternalButton, NavbarContainer, NavLogo, MobileIcon, NavMenu, NavItem, NavLinks, NavBtnLink, NavBtn } from './NavbarElements';
import { IconContext } from 'react-icons/lib';
import Accordion from '../Accordion/Accordion';
import { animateScroll as scroll } from 'react-scroll';

const Navbar = ({toggle}) => {
    const [scrollNav, setScrollNav] = useState(false)

    const changeNav = ()=>{
        if(window.scrollY >= 80)
        {
            setScrollNav(true)
        }
        else
        {
            setScrollNav(false)
        }
    }
    useEffect(()=> {
        window.addEventListener('scroll', changeNav)
    }, []);

    const toggleHome = () => {
        scroll.scrollToTop();
    }
    return (
      <>
      <IconContext.Provider value={{color: '#fff'}}>
      <Nav scrollNav={scrollNav}>
          <NavbarContainer>
              <NavLogo to='/' onClick={toggleHome}>Verticality</NavLogo>
              <MobileIcon onClick={toggle}>
                  <FaBars />
              </MobileIcon>
              <NavMenu>
                  <NavItem>
                      <NavLinks to="about"
                      smooth={true} duration={500} spy={true} exact='true' offset={-80}
                      >About</NavLinks>
                  </NavItem>
                  <NavItem>
                      <NavLinks to="start"
                      smooth={true} duration={500} spy={true} exact='true' offset={-80}
                      >Get Started</NavLinks>
                  </NavItem>
                  <NavItem>
                      <NavLinks to='faq'
                      smooth={true} duration={500} spy={true} exact='true' offset={-80}
                      >FAQ</NavLinks>
                  </NavItem>
                  <NavItem>
                      <NavLinks to="nft"
                      smooth={true} duration={500} spy={true} exact='true' offset={-80}>NFTs</NavLinks>
                  </NavItem>
              </NavMenu>
              <NavBtn>
                  <ExternalButton href="google.com" target="_blank" rel="noopener"> Purchase</ExternalButton> 
              </NavBtn>
          </NavbarContainer>
      </Nav>
      </IconContext.Provider> 
      </> 
    );
};


export default Navbar

数据.js

import Accordion from '../Accordion/Accordion';
export const homeObjOne = {
    id: 'about', 
    lightBg: false,
    lightText: true, 
    lightTextDesc: true, 
    // topLine: 'A Crypto which is here to stay',
    headline: 'Buy Now or Regret Later',
    description: 'Text ',
    buttonLabel: 'Purchase',
    imgStart: true,
    img: require('../../images/svg1.svg').default,
    alt: 'Car',
    dark: true,
    primary: true,
    darkText: false
};

export const homeObjTwo = {
    id: 'start', 
    lightBg: true,
    lightText: false, 
    lightTextDesc: false, 
    topLine: 'So, how do we get started?',
     description: 
    `text `,
    buttonLabel: <td onClick={() => window.open("https://docs.pancakeswap.finance/get-started", "_blank")}>Learn More</td>, 
    imgStart: true,
    img: require('../../images/svg2.svg').default,
    alt: 'checking off list  ',
    dark: false,
    primary: false,
    darkText: true
};


export const homeObjThree = {
    id: 'nft', 
    lightBg: false,
    lightText: true, 
    lightTextDesc: true, 
    topLine: 'NFTs are here to stay...',
    headline: 'AND SO ARE WE!',
    description: 'text  ',
    imgStart: true,
    img: require('../../images/svg3.svg').default,
    alt: 'Construction',
    dark: true,
    primary: false,
    darkText: false
};

App.js

import React from 'react';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
import './App.css';
import Accordion from './components/Accordion/Accordion';
import DisclaimerPage from './components/FooterPages';
import { homeObjTwo } from './components/InfoSection/Data';
import Home from './pages';
import aboutUs from './pages/aboutUs';
import disclaimer from './pages/disclaimer';

function App() {
  return (
    <Router>
      <Switch>
        <Route path='/' component={Home} exact />
        <Route path='/aboutUs' component={aboutUs} exact />
        <Route path='/disclaimer' component={disclaimer} exact />
        <Route path='/faq' component={Accordion} exact /> //does not work
      </Switch>
    </Router>
  );
}

export default App;

我不知道这会有多大帮助，但这里是 Accordion.js

import React,{useState} from 'react';
import {Data} from './Data';
import styled from 'styled-components';
import { IconContext } from 'react-icons';
import { FiPlus, FiMinus} from 'react-icons/fi'
import { AccordionSection, Container, Wrap, Dropdown} from './AccordionElements';





const Accordion = () => {
    const [clicked, setClicked] = useState(false)
    const toggle = index => {
        if(clicked == index)
        {
            return setClicked(null)
        }
        setClicked(index)
    }
    return (
        <IconContext.Provider value={{color : '#00FFB9', size: '25px'}}>
        <AccordionSection>  
        <Container>
            {Data.map((item, index) => {
               return (
                   <>
                   <Wrap onClick={()=> toggle(index)} key={index}>
                   <h1>{item.question}</h1>
                   <span>{clicked === index ? <FiMinus /> : <FiPlus />}</span>
                   </Wrap>
                  {clicked === index ? (
                    <Dropdown>
                   <p>{item.answer}</p>
                   </Dropdown>
                  ) : null}
                  
                   </>
               ) 
            })}
        </Container>
        </AccordionSection>
        </IconContext.Provider>

        )
}

export default Accordion

Answer 1

问题从来不在于数据文件。数据文件仅将属性传递给 Info Section 组件。在“App.js”中我添加了<Route path='/faq' component={Accordion} exact />

然后回到我添加的导航栏组件to='/faq'。
原代码：

<NavItem>
<NavLinks to='faq'
smooth={true} duration={500} spy={true} exact='true' offset={-80}
>FAQ</NavLinks>
</NavItem>

新的

<NavItem>
<NavLinks to='/faq'
smooth={true} duration={500} spy={true} exact='true' offset={-80}
>FAQ</NavLinks>
</NavItem>