javascript - 从 React 中其他生成的路由链接到生成的路由

标签 javascript reactjs

我有一个应用程序可以创建太阳系并使用以下代码创建通往它们的路线

 <Route
          exact
          path="/:id"
          render={(props) => <GenerateSystem {...props} />}
        />

这工作正常,我的 GenerateSystem 组件创建了几个行星,它们本身应该有通往自己页面的路线。

我的 GenerateSystem 组件

<MiniPlanet
          name={`planets/${makeid()}`}
          label={``}
          className={`${planetTypes[Math.floor(Math.random() * 56 + 1)]} 
          }`}
        >
          {" "}
          
        </MiniPlanet>

在我的 app.js 中,我尝试像这样使用路由

<Route exact path ="/planet/:id" component={GeneratePlanet} />

然而到目前为止,当我点击这些路线之一时,例如 http://localhost:3000/planets/p0c70v,而不是将我带到我的 GeneratePlanet组件它将返回我的主页。目前我的 GeneratePlanet 组件只包含一行文本,所以我知道问题不存在。

我在路由方面做错了什么?我的完整代码可以查看 here .

最佳答案

找到原因了

useEffect(() => {
    EnterSystem();
    MakeTheSystem();

    return () => {
      ExitSystem();
    };
  }, []);

去掉这部分代码

return () => {
      ExitSystem();
    };

触发退出动画。它重定向到“/”页面。

关于javascript - 从 React 中其他生成的路由链接到生成的路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68091308/

相关文章:

javascript - 为什么 'Error: Couldn' t 在 ReactJS for React Hot Loader 中找到相对于目录的预设 "react-hot"...”?

javascript - 在 Javascript 中显示全部 ().html

javascript - 仅在 IE9 上存在的 ajax 调用中的访问被拒绝

javascript - 如何获取收件箱中的所有邮件? (包括回复)

php - 奇怪的 JavaScript、PHP 和 Google map 行为

reactjs - 简单的CSS动画不适用于动态reactjs元素

css - 如何从 Material UI TextField React 组件中删除 flex 边框和插入框阴影?

javascript - react : does it cost extra memory when passing object as prop?

javascript - 修改对象数组中的对象属性

reactjs - 无法解析模块 'react-dom'