如何隐藏URL扩展名以防止访问页面

问题描述

我正在开发带有react的游戏,该游戏的各个阶段都有很多url路径。我想隐藏URL扩展名,以防止访问其他页面或阻止用户键入游戏的下一级路径。

scale_size_area

您可能已经在App.js文件中看到,我已经尝试过,但是在完成Scene1之后,我无法访问下一个场景或下一个路径。

使用MemoryRouter是否有错?

解决方法

您可以使用条件设置访问限制。 像这样

let isScene1Finished = false;
let isScene2Finished = false;

然后在您的开关中

<Switch>
  <Route exact path="/register" component={Register} />
  <Route exact path="/login" component={Login} />

  <PrivateRoute exact path="/scene1" component={Scene1} />

  // if scene 1 is done,make scene 2 available
  {!!isScene1Finished && <PrivateRoute exact path="/scene2" component={Scene2} />}

  // if scene 2 is done,make scene 3 available
  {!!isScene2Finished && <PrivateRoute exact path="/scene3" component={Scene2} />}

  // and so on ...
</Switch>

注意:内嵌注释仅用于解释。您需要删除它们才能使其正常工作。

还要注意!!,它位于此处以确保将变量转换为布尔值。