Javascript 在不同路线中使用useRef对滚动导航作出反应

关于我的最后一个问题，我一直在尝试将裁判映射到其他路线。滚动处理程序正在工作，但

ref.current

为

null

。所以我在寻找这个难题的答案。如果没有外部依赖项，如何解决此问题

App.tsx

import React, { useEffect, useRef } from "react";
import { BrowserRouter, Route, NavLink, useLocation } from "react-router-dom";
import Home from "./pages/Home";
import "./styles.css";

const Header = ({ refs }) => {
  const location = useLocation();

  useEffect(() => {
    console.log("location", location.pathname);
    switch (location.pathname) {
      case "/about":
        scrollSmoothHandler(refs.aboutRef);
        break;
      case "/contact":
        scrollSmoothHandler(refs.contactRef);
        break;
      case "/hero":
        scrollSmoothHandler(refs.heroRef);
        break;

      default:
        scrollSmoothHandler(refs.homeRef);
        break;
    }
  }, [location, refs]);

  const scrollSmoothHandler = ref => {
    console.log("Triggered.");
    console.log(ref.current);
    //ref.current.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <>
      <NavLink to="/hero" activeClassName="selected">
        Hero
      </NavLink>
      <NavLink to="/about" activeClassName="selected">
        About
      </NavLink>
      <NavLink to="/contact" activeClassName="selected">
        Contact
      </NavLink>
    </>
  );
};

function App() {
  const homeRef = useRef(null);
  const heroRef = useRef(null);
  const aboutRef = useRef(null);
  const contactRef = useRef(null);

  return (
    <div ref={homeRef} className="App">
      <BrowserRouter>
        <Header refs={{ aboutRef, contactRef, heroRef, homeRef }} />
        <Route
          exact
          to="/"
          refs={{ aboutRef, contactRef, heroRef, homeRef }}
          component={Home}
        />
        // More routes here.
      </BrowserRouter>
    </div>
  );
}

export default App;

import React, { useEffect, useRef } from "react";
import { BrowserRouter, Route, NavLink, useLocation } from "react-router-dom";
import Home from "./pages/Home";
import "./styles.css";

const Header = ({ innerRefs }) => {
  const location = useLocation();

  useEffect(() => {
    console.log("location", location.pathname);
    switch (location.pathname) {
      case "/about":
        scrollSmoothHandler(innerRefs.aboutRef);
        break;
      case "/contact":
        scrollSmoothHandler(innerRefs.contactRef);
        break;
      case "/hero":
        scrollSmoothHandler(innerRefs.heroRef);
        break;

      default:
        scrollSmoothHandler(innerRefs.homeRef);
        break;
    }
  }, [location, innerRefs]);

  const scrollSmoothHandler = innerRef => {
    console.log("Triggered.");
    console.log(innerRef.current);
    innerRef.current.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <>
      <NavLink to="/hero" activeClassName="selected">
        Hero
      </NavLink>
      <NavLink to="/about" activeClassName="selected">
        About
      </NavLink>
      <NavLink to="/contact" activeClassName="selected">
        Contact
      </NavLink>
    </>
  );
};

function App() {
  const homeRef = useRef(null);
  const heroRef = useRef(null);
  const aboutRef = useRef(null);
  const contactRef = useRef(null);

  return (
    <div ref={homeRef} className="App">
      <BrowserRouter>
        <Header innerRefs={{ aboutRef, contactRef, heroRef, homeRef }} />
        <Route
          exact
          to="/"
          render={routeProps => (
            <Home
              {...routeProps}
              innerRefs={{ aboutRef, contactRef, heroRef, homeRef }}
            />
          )}
        />
        // More routes here.
      </BrowserRouter>
    </div>
  );
}

export default App;

import React，{useffect，useRef}来自“React”；
从“react router dom”导入{BrowserRouter，Route，NavLink，useLocation}；
从“/pages/Home”导入主页；
导入“/styles.css”；
常量头=（{refs}）=>{
const location=useLocation（）；
useffect（（）=>{
log（“location”，location.pathname）；
开关（位置.路径名）{
案例“/关于”：
scrollSmoothHandler（参考文献aboutRef）；
打破
案例“/联系人”：
scrollSmoothHandler（参考contactRef）；
打破
案例“/英雄”：
scrollSmoothHandler（refs.heroRef）；
打破
违约：
scrollSmoothHandler（refs.homeRef）；
打破
}
}，[位置，参考文献]；
常量scrollSmoothHandler=ref=>{
console.log（“触发”）；
控制台日志（参考当前）；
//ref.current.scrollIntoView（{behavior:“smooth”}）；
};
返回(
英雄
关于
接触
);
};
函数App（）{
const homeRef=useRef（null）；
常量heroRef=useRef（null）；
const aboutRef=useRef（null）；
const contactRef=useRef（空）；
返回(
//这里有更多的路线。
);
}
导出默认应用程序；

---

Home.tsx

import React, { Fragment, forwardRef, useRef } from "react";
import "../styles.css";

const Hero = forwardRef((props, ref) => {
  return (
    <section ref={ref}>
      <h1>Hero Section</h1>
    </section>
  );
});

const About = forwardRef((props, ref) => {
  return (
    <section ref={ref}>
      <h1>About Section</h1>
    </section>
  );
});

const Contact = forwardRef((props, ref) => {
  return (
    <section ref={ref}>
      <h1>Contact Section</h1>
    </section>
  );
});

function Home(refs) {
  const heroRef = useRef(refs.heroRef);
  const aboutRef = useRef(refs.aboutRef);
  const contactRef = useRef(refs.contactRef);
  return (
    <Fragment>
      <Hero ref={heroRef} />
      <About ref={aboutRef} />
      <Contact ref={contactRef} />
    </Fragment>
  );
}

export default Home;

import React, { Fragment, forwardRef, useRef } from "react";
import "../styles.css";

const Hero = forwardRef((props, ref) => {
  return (
    <section ref={ref}>
      <h1>Hero Section</h1>
    </section>
  );
});

const About = forwardRef((props, ref) => {
  return (
    <section ref={ref}>
      <h1>About Section</h1>
    </section>
  );
});

const Contact = forwardRef((props, ref) => {
  return (
    <section ref={ref}>
      <h1>Contact Section</h1>
    </section>
  );
});

function Home({ innerRefs }) {
  return (
    <Fragment>
      <Hero ref={innerRefs.heroRef} />
      <About ref={innerRefs.aboutRef} />
      <Contact ref={innerRefs.contactRef} />
    </Fragment>
  );
}

export default Home;

import React，{Fragment，forwardRef，useRef}来自“React”；
导入“./styles.css”；
const Hero=forwardRef（（道具，ref）=>{
返回(
英雄组
);
});
const About=forwardRef（（道具，ref）=>{
返回(
关于部分
);
});
const Contact=forwardRef（（道具，ref）=>{
返回(
接触段
);
});
功能主页（参考文献）{
常量heroRef=useRef（refs.heroRef）；
const aboutRef=useRef（参考aboutRef）；
const contactRef=useRef（refs.contactRef）；
返回(
.Forks非常感谢。
如果不在组件上使用forwardRef，则无法将ref作为prop传递给名为prop的其他组件。您需要为其指定另一个名称，以使其工作，例如innerRefs

还要将参照作为道具传递给管线组件，请使用“渲染道具”方法

App.tsx

import React, { useEffect, useRef } from "react";
import { BrowserRouter, Route, NavLink, useLocation } from "react-router-dom";
import Home from "./pages/Home";
import "./styles.css";

const Header = ({ refs }) => {
  const location = useLocation();

  useEffect(() => {
    console.log("location", location.pathname);
    switch (location.pathname) {
      case "/about":
        scrollSmoothHandler(refs.aboutRef);
        break;
      case "/contact":
        scrollSmoothHandler(refs.contactRef);
        break;
      case "/hero":
        scrollSmoothHandler(refs.heroRef);
        break;

      default:
        scrollSmoothHandler(refs.homeRef);
        break;
    }
  }, [location, refs]);

  const scrollSmoothHandler = ref => {
    console.log("Triggered.");
    console.log(ref.current);
    //ref.current.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <>
      <NavLink to="/hero" activeClassName="selected">
        Hero
      </NavLink>
      <NavLink to="/about" activeClassName="selected">
        About
      </NavLink>
      <NavLink to="/contact" activeClassName="selected">
        Contact
      </NavLink>
    </>
  );
};

function App() {
  const homeRef = useRef(null);
  const heroRef = useRef(null);
  const aboutRef = useRef(null);
  const contactRef = useRef(null);

  return (
    <div ref={homeRef} className="App">
      <BrowserRouter>
        <Header refs={{ aboutRef, contactRef, heroRef, homeRef }} />
        <Route
          exact
          to="/"
          refs={{ aboutRef, contactRef, heroRef, homeRef }}
          component={Home}
        />
        // More routes here.
      </BrowserRouter>
    </div>
  );
}

export default App;

import React, { useEffect, useRef } from "react";
import { BrowserRouter, Route, NavLink, useLocation } from "react-router-dom";
import Home from "./pages/Home";
import "./styles.css";

const Header = ({ innerRefs }) => {
  const location = useLocation();

  useEffect(() => {
    console.log("location", location.pathname);
    switch (location.pathname) {
      case "/about":
        scrollSmoothHandler(innerRefs.aboutRef);
        break;
      case "/contact":
        scrollSmoothHandler(innerRefs.contactRef);
        break;
      case "/hero":
        scrollSmoothHandler(innerRefs.heroRef);
        break;

      default:
        scrollSmoothHandler(innerRefs.homeRef);
        break;
    }
  }, [location, innerRefs]);

  const scrollSmoothHandler = innerRef => {
    console.log("Triggered.");
    console.log(innerRef.current);
    innerRef.current.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <>
      <NavLink to="/hero" activeClassName="selected">
        Hero
      </NavLink>
      <NavLink to="/about" activeClassName="selected">
        About
      </NavLink>
      <NavLink to="/contact" activeClassName="selected">
        Contact
      </NavLink>
    </>
  );
};

function App() {
  const homeRef = useRef(null);
  const heroRef = useRef(null);
  const aboutRef = useRef(null);
  const contactRef = useRef(null);

  return (
    <div ref={homeRef} className="App">
      <BrowserRouter>
        <Header innerRefs={{ aboutRef, contactRef, heroRef, homeRef }} />
        <Route
          exact
          to="/"
          render={routeProps => (
            <Home
              {...routeProps}
              innerRefs={{ aboutRef, contactRef, heroRef, homeRef }}
            />
          )}
        />
        // More routes here.
      </BrowserRouter>
    </div>
  );
}

export default App;

import React，{useffect，useRef}来自“React”；
从“react router dom”导入{BrowserRouter，Route，NavLink，useLocation}；
从“/pages/Home”导入主页；
导入“/styles.css”；
常量头=（{innerRefs}）=>{
const location=useLocation（）；
useffect（（）=>{
log（“location”，location.pathname）；
开关（位置.路径名）{
案例“/关于”：
scrollSmoothHandler（innerRefs.aboutRef）；
打破
案例“/联系人”：
scrollSmoothHandler（innerRefs.contactRef）；
打破
案例“/英雄”：
scrollSmoothHandler（innerRefs.heroRef）；
打破
违约：
scrollSmoothHandler（innerRefs.homeRef）；
打破
}
}，[位置，内部参考]；
常量scrollSmoothHandler=innerRef=>{
console.log（“触发”）；
控制台日志（innerRef.current）；
innerRef.current.scrollIntoView（{behavior:“smooth”}）；
};
返回(
英雄
关于
接触
);
};
函数App（）{
const homeRef=useRef（null）；
常量heroRef=useRef（null）；
const aboutRef=useRef（null）；
const contactRef=useRef（空）；
返回(
(
)}
/>
//这里有更多的路线。
);
}
导出默认应用程序；


Home.tsx

import React, { Fragment, forwardRef, useRef } from "react";
import "../styles.css";

const Hero = forwardRef((props, ref) => {
  return (
    <section ref={ref}>
      <h1>Hero Section</h1>
    </section>
  );
});

const About = forwardRef((props, ref) => {
  return (
    <section ref={ref}>
      <h1>About Section</h1>
    </section>
  );
});

const Contact = forwardRef((props, ref) => {
  return (
    <section ref={ref}>
      <h1>Contact Section</h1>
    </section>
  );
});

function Home(refs) {
  const heroRef = useRef(refs.heroRef);
  const aboutRef = useRef(refs.aboutRef);
  const contactRef = useRef(refs.contactRef);
  return (
    <Fragment>
      <Hero ref={heroRef} />
      <About ref={aboutRef} />
      <Contact ref={contactRef} />
    </Fragment>
  );
}

export default Home;

import React, { Fragment, forwardRef, useRef } from "react";
import "../styles.css";

const Hero = forwardRef((props, ref) => {
  return (
    <section ref={ref}>
      <h1>Hero Section</h1>
    </section>
  );
});

const About = forwardRef((props, ref) => {
  return (
    <section ref={ref}>
      <h1>About Section</h1>
    </section>
  );
});

const Contact = forwardRef((props, ref) => {
  return (
    <section ref={ref}>
      <h1>Contact Section</h1>
    </section>
  );
});

function Home({ innerRefs }) {
  return (
    <Fragment>
      <Hero ref={innerRefs.heroRef} />
      <About ref={innerRefs.aboutRef} />
      <Contact ref={innerRefs.contactRef} />
    </Fragment>
  );
}

export default Home;

import React，{Fragment，forwardRef，useRef}来自“React”；
导入“./styles.css”；
const Hero=forwardRef（（道具，ref）=>{
返回(
英雄组
);
});
const About=forwardRef（（道具，ref）=>{
返回(
关于部分
);
});
const Contact=forwardRef（（道具，ref）=>{
返回(
接触段
);
});
函数主目录（{innerRefs}）{
返回(