我尝试创作的网站有2页

| 页|路由路径|组件|细节|
| - ------|- ------|- ------|- ------|
| 家|"/"|导航栏，视频库1，视频游戏2，页脚||
| 概念|'/概念'|导航栏，图片1，图片2，页脚||
每个页面的主要组件（视频或图片库）是两个原因。其相同，但不同的json内容等（类）
| 项目|描述|
| - ------|- ------|
| "/"|视频库1（10个视频）、视频库2（实时部分）（10个视频）|
| '/概念'|图片库1（概念艺术，50张图片），图片库2（情绪板部分，概念艺术画廊后的40张图片）|

主要问题

• 我试图添加'实时'链接通过react-scroll（在导航文件）。它的作品时，我在主页（'/'）路线。但失败时，我在第二页（/概念）。如何告诉它首先去'/'，然后尝试滚动到元素或组件。？
• 第四个链接（moodboards）也是如此，它从概念页面工作，但不从主页。
• 还请注意，'链接'是从React滚动被禁用，因为我试图测试React滚动。
• 如果这可以在没有反作用涡旋的情况下实现，那就更好了。

• 在这里你可以看到，实时链接工作在主页上，但不工作时，你在概念页。
• • 导航栏. js**

import React from "react";
import "./styles.css";
import { NavLink } from "react-router-dom";
// import { Link } from "react-router-dom";
import { Link, DirectLink, Element, Events, animateScroll as scroll, scrollSpy, scroller } from 'react-scroll'

import MyLogo from '../img/logo_ff2_2021.png';
export default function Nav(){

  // navlinks can have a class of active, which can be styled, comparing to links
  // classname, style, children, to, exact
  return(
        <div className="navbar">
          <div className="logo">
            <img src="assets/logo_ff2_2021.png" style={{width:'100%'}} alt="logo" />
          </div>
           <ul className="nav-links">
              <NavLink style={({isActive}) => {return isActive ? {color: 'red'} : {}}} to="/">Home</NavLink>
              <Link  style={({isActive}) => {return isActive ? {color: 'red'} : {}}} to="RT" spy={true} smooth={true} duration={500}>RealTime</Link>
              <NavLink style={({isActive}) => {return isActive ? {color: 'red'} : {}}} to="/concepts">Concepts</NavLink>
              <Link  style={({isActive}) => {return isActive ? {color: 'red'} : {}}} to="Moodboards" spy={true} smooth={true} duration={500}>Moodboards</Link>
           </ul>
        </div>
  );

}

• • 主页. js**

import headerVideo1 from '../assets/slide_rag.mp4';
import MyCarousel from '../components/Carousel';
import StickyFooter from '../components/Footer';
import VideoGallery from '../components/VideoGallery';
import VideoGallery2 from '../components/VideoGallery2';
import {  DirectLink, Element, Events, animateScroll as scroll, scrollSpy, scroller } from 'react-scroll'
import './Home.css';

export function Home() {

    // const videos = getVideos();
    return (
        <>
        <MyCarousel />
        <VideoGallery name="main" />
        <Element name="RT" className="element">
        <VideoGallery2 name="RT" />
        </Element>
        <StickyFooter />
        </>
    );
}
export default Home;

• • 应用程序. js**

import React from 'react';
import './App.css';
import Nav from './components/Nav';
import { BrowserRouter , Route,Routes } from "react-router-dom";
import Home from './pages/Home';
import Concepts from './pages/Concepts';
import NotFound from './pages/NotFound';

function App() {

  return (
    <>
    <BrowserRouter>
      <div className="App">
        <Nav />
      </div>
    <Routes>
          <Route path="/" element={<Home/>} />
          <Route path="/footer" component={<StickyFooter/>} />
          <Route path="/concepts" element={<Concepts/>} />
          <Route path="/about" element={<About/>} />
    </Routes>
    </BrowserRouter>
    </>
  );
}

export default App;