javascript - 如何在 React 中创建带有登录组件的多页面应用程序？

Question

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

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

2. 我不知道如何在 React Router 中进行身份验证，我尝试了很多方法，遵循了很多教程，但没有任何结果。

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