路由到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中其他组件的特定部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！