const Options = () => {
return (
<React.Fragment>
<Header />
<Content>
<SideBar />
<OptionsArea>
<Switch>
<Route exact path="/" component={ArticleList} />
<Route exact path="/picture" component={Picture} />
<Route exact path="/user" component={User} />
<Route exact path="/edit" component={Edit} />
</Switch>
</OptionsArea>
</Content>
</React.Fragment>
);
};
const App = (props) => {
const { loginState } = props;
return (
<React.Fragment>
<GlobalStyle />
<Switch>
<Route exact path="/login" component={WrappedNormalLoginForm} />
<Route exact path="/" component={<Options />} />
{
loginState ? "" : <Redirect push from="/" to="/login" />
}
{/* <Route exact path="/" render={() => (loginState ? (<Options />) : (<Redirect push from="/" to="/login" />))} /> */}
</Switch>
</React.Fragment>
);
};my goal is to enter the main interface only when the user logs in. No login is automatically redirected to the login page, but in the actual operation, I find that the login page never renders, and the console does not report an error. Is it a routing problem? thank you.