Question

我在路由到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”，以便我可以阅读该新闻...所有新闻都位于同一页面的容器中。...

Answer 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>

Answer 2

您只需要一条路线

public WebElement findElementIdByScrolling(String textContains){
    wait(Constants.WaitTime);
    return driver.findElement(MobileBy.AndroidUIAutomator("new UiScrollable(new UiSelector()).scrollIntoView(new UiSelector().resourceId(\"" + textContains + "\"));"));

您可以给链接

<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>

获得类似eyof的新闻类型后：

第1步：

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

第二步：

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

Answer 3

好吧，我找到了一个非常好的库作为解决方案，它称为react-scroll，它具有一个选项，可以将您需要的链接包装在较早定义的滚动链接中，并将要链接的组件包装为特定的一部分带有元素ID的页面，您将其作为滚动链接的参数给了它...如果需要，请尝试一下。

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

3 个答案: