问题描述
所以我有一个涉及大量路由的React应用程序，并且该路由是根据条件完成的。例如，如果用户登录，那么某些路径的含义可能与未登录时的含义有所不同。这是一个简单的示例。
<Switch>
(this.state.isAuthenticated)?
this.state.game?
<Route path="/game/Game91" render={(props) => <Game91 {...props} games={this.state.allGames} />} />:
<Route path="/game/Game91/" render={(props) => <CreateGame {...props} game="game91" />} />:
<Route exact path="/game/Game91" render={(props) => <LoginForm {...props} onGuestLogin = {this.guestLogin} parentLocation = "/game/Game91" />} />
}
</Switch>
...
因此在上面的代码中，如果用户通过了身份验证并且选择了游戏，那么我希望URL /game/Game91将用户带到Game91组件。如果用户已通过身份验证但未选择游戏，我希望/game/Game91将用户带到创建游戏组件，依此类推。目前，这对我来说一直很困难。我不太了解这可能不是他们的最佳做法，因此，如果您分享此类方案中的最佳做法，并向我发送更多阅读的链接，我将感到很高兴。但是，我现在的主要问题是，如果我有另一条类似/somepath/to的路径，那又意味着像/game/Game91这样的不同东西怎么办？为此，我将不得不重写所有上述代码，因为我无法将所有这些都适合一个三元运算符。猜想这就是我想要的。
<Switch>
(this.state.isAuthenticated)?
this.state.game?
<Route path="/game/Game91" render={..something..} />
<Route path="/somePath/to" render={..something..} />
:
<Route path="/game/Game91" render={..somethingElse..} />
<Route path="/somePath/to" render={..somethingElse..} />
:
<Route path="/game/Game91" render={..something..} />
<Route path="/somePath/to" render={..something..} />
}
</Switch>
但是上述操作是不可能的，因为三元运算符不能返回多个东西。如果JSX不允许声明，我就无法使用。因此，理想情况下，如果我可以使用函数来返回这对事物，而无需像使用scss mixins那样将它们包装在任何类型的容器中，那将是很棒的。那么是有反应的事情吗，还是有其他更好的方法来做这些事情？
解决方法
通常，每个页面或容器都应仅寻址到一个路由路径。不必在运行时通过检查标志来更改组件，而是可以使用条件挂钩根据您的条件从一条路线导航到另一条路线。
注意：
此示例使用React Router v6。如果您使用的是React Router v5.2版本，则需要使用历史记录api而不是导航。
useEffect(() => {
if (isAuthenticated) {
if(isGameActive)
navigate('/gaming');
else
navigate('/create-game');
}
else {
navigate('/login');
}
},[isAuthenticated]);
<Router>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/gaming" element={<Game91 />} />
<Route path="/create-game" element={<CreateGaming />} />
</Routes>
</Router>