如何在反应中使用登录组件创建多页面应用程序？

Question

最近我尝试通过 React 构建一个 Web 平台。 一切都很好，一切正常。 但是当我尝试为用户登录创建不同的页面时，我遇到了很多问题：

1. 我的代码中已经有了路由，所以当我尝试将其他路由添加到另一个 js 文件时，它们根本不起作用。

2. 我不知道如何在反应路由器中进行身份验证，我尝试了很多方法，遵循了很多教程，但没有任何效果。

<Switch>
    <Route exact path='/' component={Feed}/>
    <Route path="/user" component={Profilo}/>
    <Route path='/explore-page' component={ExplorePage} />
    <Route path='/events-page' component={EventsPage} />
    <Route path='/calendar-page' component={CalendarPage} />
    <Route path='/stats-page' component={StatsPage} />
    <Route path='/form' component={FormPage}/>
    <Route path="/user" component={Profilo}/>
    <Route path="/user/:userId" component={Profilo} />
</Switch>

这是我目前在 div 中使用的所有路由来渲染 react 组件。 正如我在上层文件中添加其他路由之前所说的那样不会给我回复。

所以，最后，我想问你，我应该把登录和主页的路由放在哪里？ 在那里还是我应该移动所有东西？

先感谢您。

Answer 1

一种简单的方法是在渲染函数中添加处理身份验证的逻辑。

如果用户未通过身份验证。 重定向到登录页面。 否则，转到您的组件

render() {
    if (!this.props.isAuth) {
        return (
            <Switch>
                <Route exact path="/" component={Login} />
                <Redirect to="/" />
            </Switch>
        );
    }
    return (<Switch>
        <Route
            // your router
        />
    </Switch>);
}