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

Question

如果用户尚未登录，我将尝试重定向用户。我将其存储在redux状态和isLoggedIn状态，并将其设置为false，除非用户登录。

在index.js的routers中，我设置了一个条件来将用户重定向到/login，但它不起作用。它确实将url更改为/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>
);
}
}

这是我使用Routes的App组件。

render() { 
return (
<BrowserRouter>
<Layout>
<Routes store = {this.store} />
</Layout>
</BrowserRouter>
);
}

编辑

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

<div>
<Redirect to="/login" />
<Route path="/login" render={
(props) => <Login {...props} store={this.store} />
} />
</div>

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>
}