路由到 React 中其他组件的特定部分-前端问题

Routing to specific part of other component in React(路由到 React 中其他组件的特定部分)

本文介绍了路由到 React 中其他组件的特定部分的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在路由到 React 中另一个功能组件的特定部分时遇到问题.我已经在 Main 组件中声明了 Route 并在我想要重定向的地方周围链接了......它看起来像这样......主函数获取:

I have a problem with routing to a specific part of another functional component in React. I have declared Route in Main component and Link around the place where I want to redirect from... it looks like this... The main function gets:

<Switch>
    <Route exact path='/news/:eyof' component={News} />
    <Route exact path='/news/:svetsko' component={News} />
    <Route exact path='/news' component={News} />
</Switch>

而我在其他功能组件中定义:

And I defined in other functional component:

<div className="card">
  <Link to="/news/:svetsko">
    <div className="card-header">
      <h3>Artistic gymnastics world championship</h3>
     </div>
   </Link>
</div>

因此，通过单击此链接，我需要重定向到新闻页面类svetsko"，以便我可以阅读该新闻...所有新闻都在同一页面的容器中....

So by clicking on this link, I need to get redirected to News page class "svetsko" so I can read about that news... All news are in containers in same page....

推荐答案

在你的组件中尝试这样的事情:

Try something like this in your component:

let { scrollToSection } = useParams();
svetskoRef = React.createRef();

useParams() 允许您访问 :svetsko.当组件加载时，您可以使用 scrollToSection 在页面的不同部分之间导航.scrollRef 用于访问要滚动到的 DOM 元素.

useParams() allows you to access :svetsko. When the component loads, you can use scrollToSection to navigate between different parts of the page. The scrollRef is used to access the DOM element you want to scroll to.

window.scrollTo(0,scrollRef.offsetTop)

标记看起来像这样:

<div className="card" ref="svetskoRef">
  <Link to="/news/:svetsko">
    <div className="card-header">
      <h3>Artistic gymnastics world championship</h3>
     </div>
   </Link>
</div>

这篇关于路由到 React 中其他组件的特定部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！