Question

如果他/她尚未登录，我正在尝试重定向用户。我将其以redux状态存储在isLoggedIn状态，除非用户登录，否则将其设置为false。

在routers的{{1}}中，我设置了一个条件来将用户重定向到index.js，但是它不起作用。确实会将网址更改为/login，我可以看到/login组件已加载，但Layout组件未加载。

如果我只删除条件，则可以看到Login组件和Login组件。

我已经尝试了许多不同的方法，但是我找不到合适的方法来处理此问题。希望你们能帮助我。顺便说一句，这是为了学习，所以我可能有业余代码。

Route

Routes/index.js

这是我使用class Routes extends React.Component { constructor(props, history) { super(props); this.store = this.props.store; } render() { return ( <Switch> {this.store.isLoggedIn ? <Switch> <Route exact path="/" render={ (props) => <Home {...props} store={this.store} /> } /> <Route path="/quality" render={ (props) => <h1>Quality Track</h1> } /> <Route path="/login" render={ (props) => <Login {...props} store={this.store} /> } /> <Route render={ (props) => <Login {...props} store={this.store} /> } /> </Switch> : <Redirect to="/login" /> } </Switch> ); } }的{{1}}组件。

App

编辑

当我更改Routes / index.js的最后一部分时，它起作用了。这样可以使用吗？

Routes

Answer 1

第一个Switch块包含isLoggedIn为true时可用的路由。否则，第二个块的路线可用。如果isLoggedIn为false，则任何URL都将重定向到/login。

{this.store.isLoggedIn ?
    <Switch>
        <Route exact path="/" render={
            (props) => <Home {...props} store={this.store} />
        } />
        <Route path="/quality" render={
            (props) => <h1>Quality Track</h1>
        } />
    </Switch>
    :
    <Switch>
        <Route path="/login" render={
            (props) => <Login {...props} store={this.store} />
        } />
        <Redirect to="/login" />
    </Switch>
}

重定向不会在路由器v4中绘制组件

1 个答案: