路由到 React 中其他组件的特定部分

2022-01-19 00:00:00 reactjs frontend javascript react-router

我在路由到 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>

相关文章