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

【问题标题】：Routing to specific part of other component in React路由到 React 中其他组件的特定部分
【发布时间】：2020-01-16 13:46:04
【问题描述】：

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

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

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

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

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

【问题讨论】：

您是否尝试过将路由上的News 组件替换为Svetsko 组件？
Svetsko 不是组件，它是 News 组件中的 className...
在新闻组件中，您必须从路由器读取参数，然后决定如何处理该参数（加载应用不同样式或其他内容的内容）
你遇到的主要问题是什么？？？
如果你使用钩子，你可以使用这个链接（查看他如何使用 useParams）reacttraining.com/react-router/web/example/url-params

标签： javascript reactjs react-router frontend

【解决方案1】：

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

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

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

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>

【讨论】：

我应该在 News 组件中声明它，因为我正在尝试访问其中的 className 吗？
是的，您将在这里获取路由参数并使用参考。
import { useParams, scrollRef } from 'react-router-dom' const News = () => { let { scrollToSection } = useParams(); scrollRef = React.createRef(); window.scrollTo(0,scrollRef.offsetTop) 返回（提示未定义 scrollRef 的错误...
将 ref="scrollRef" 添加到标记中的 svetsko 元素

【解决方案2】：

你只需要一条路线

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

你可以给个链接

 <Link to={{
  pathname: '/news',
  state: { news : yourNewsName } // you can pass svetsko here
}}> 

 <div className="card-header">
  <h3>Artistic gymnastics world championship</h3>
 </div>

</Link>

您可以在新闻页面中访问此状态，例如

<div>{  props.location.state !== undefined ? props.location.state.news : '' }</div>

获得像 eyof 这样的新闻类型后：

第一步：

   you can create on functional component which takes argument as your
 data and return your new post jsx with your data.

第二步：

   So,when you get your eyof in your page then you are going to call 
this function and pass your data related to your eyof and that function 
return your new post to your page.

【讨论】：

这实际上是把我带到新闻页面，但不是在定向路径上...`

EYOF 2019. year

`我把最后一行代码在 od 目标 div 内......我应该将它包裹在文本周围还是什么？但无论如何，状态没有被提交......
不，看起来您正在尝试通过链接传递您的孩子不要这样做，您必须在新闻页面中有条件地呈现您的组件
所以我最好声明一个名为eyof、svetsko和rest的组件，这样我就可以称它们为真正的条件声明并渲染它？
您如何看待将所有 className-s 内容作为 JSON 文件，id:eyof, content: text 我正在使用？它可以节省一些性能并加快网页速度...

【解决方案3】：

好的，我找到了一个非常好的库作为解决方案，它被称为 react-scroll，它可以选择将您需要的链接包装在之前定义的滚动链接中，并将您希望链接的组件包装为特定部分带有 id 元素的页面作为参数提供滚动链接...如果您需要，请尝试一下。

【讨论】：

EYOF 2019. year