Question

我希望这个问题在某个地方还没有得到解答，我还没有找到... 因此，我仍然对React.js还是陌生的，但是无论如何总是尝试使用它做新的事情。

我已经进行了研究，但是所提出的解决方案似乎都不适合我。我将保留一些搜索内容的示例：

How to use Redirect in the new react-router-dom of Reactjs

所以我基本上有这段代码：

clicked(mousePosX, mousePosY) {
 let d = property.dist(mousePosX, mousePosY, this.x, this.y);
 if (d < this.w && d < this.h) {
  console.log("square"); //working until here
  return <Link to="/test/" />; //not redirecting
 }
}

我将其放置在 class 内，该类在p5库的帮助下创建了一个正方形，该库也在内部 const箭头功能。

我还尝试过将Link标签更改为Redirect标签，但不走运。

如果您想查看整个文件（或项目），请使用以下链接：

Whole file (github)

我想要做的是在用户单击屏幕上的任何正方形后将用户重定向到其他地方。

感谢您的帮助。预先感谢。

Answer 1

<Link/>不会重定向到其他地方，除非您单击它，以编程方式重定向，您需要使用<Redirect/>组件。

更新您的clicked函数，当用户单击方框时，将重定向变量的状态设置为true。并在渲染功能中检查redirect是否为真，是否为true，然后使用<Redirect/>组件将其重定向到其他地方，否则返回其他UI组件。

这是基本状态设置的外观-

constructor(props){
    super(props);
    this.state = {
        redirect: false,
        //other state data
    }
}

clicked(mousePosX, mousePosY) {
 let d = property.dist(mousePosX, mousePosY, this.x, this.y);
 if (d < this.w && d < this.h) {
  console.log("square"); 

  this.setState({
    redirect:true, //set redirect to true
  });

 }
}

在渲染功能中

render(){
    if(this.state.redirect){
        return <Redirect to="/test" />
    }
    else{
        //return something else
    }
}

Answer 2

link标记应与任何html标记一起使用，如下所示 https://reacttraining.com/react-router/web/guides/quick-start

在if语句之后，React Router Link将不会更新路由

2 个答案: