React 路由器 Link 不会在 if 语句后更新路由

Question

我希望这个问题还没有在某个地方得到解答而且我还没有找到... 所以我对 React.js 还是个新手，但无论如何我总是在尝试新事物。

我已经完成了研究，但是 none 所提议的解决方案似乎对我有用。我会留下一些我搜索过的例子：

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

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 库的帮助下创建了一个正方形，它也是里面一个常量箭头函数。

我也曾尝试将 Link 标签更改为重定向标签，但没有成功。

如果您想查看整个文件（或项目），这里是 link:

Whole file (github)

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

如有任何帮助，我将不胜感激。提前致谢。

Answer 1

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

Answer 2

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

更新您的 clicked 功能，当用户点击方框时，将状态中的重定向变量设置为 true。并在渲染函数中检查 redirect 是否为真，如果是 true 则使用 <Redirect/> 组件重定向到其他地方，否则 return 你的另一个 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
    }
}

React 路由器 Link 不会在 if 语句后更新路由

React router Link won't update route after if statement

javascript

reactjs

p5.js

react-router