反应中有没有像sass mixins这样的东西？

Question

所以我有一个涉及大量路由的反应应用程序，并且这些路由是根据条件完成的。例如，如果用户登录，则某些路径的含义可能与用户未登录时的含义不同。这是一个简单的示例。

<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 将用户带到创建游戏组件等等。现在这对我来说很有效。我不明白这可能不是他们的最佳实践，所以如果您分享此类 scinarios 中的最佳实践并向我发送更多阅读的链接，我会很高兴。但我现在的主要问题是，如果我有另一条路径，比如/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>

但上述情况是不可能的，因为三元运算符不能返回多于一件事。我不能使用 if statments 因为 JSX 不允许它们。因此，理想情况下，如果我可以拥有返回这对东西的函数，而无需将它们包装在任何类型的容器中，就像使用 scss mixins 那样，那将是很棒的。那么在 react 中是否有这样的事情，或者有其他更好的方法来做这些事情吗？

Answer 1

通常每个页面或容器都应该只寻址到一个路由路径。无需在运行时通过检查标志来更改组件，您可以使用反应钩子根据您的条件从一条路线导航到另一条路线。

注意：

本示例使用 react 路由器 v6。如果你使用的是v5.2版本的react router，那么你需要使用history api而不是navigation。

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>

react-router v6