设计多页面 React 应用程序

Question

我正在计划一个基于 Web 的应用项目的阶段。我想在上面使用 React JS。

此项目仅服务于经过身份验证的用户。我相信随着时间的推移，这将是一个大项目。

使用一页反应应用程序，我可以重定向到登录页面，但在 bundle.js 中，每个 api URI 都会显示，我不想公开。所以我认为与其创建一个页面应用程序，不如将其拆分为几个基本页面。这样我就不会将 api URL 暴露给未经授权的访问者（使用单独的登录页面）。

我想单独捆绑每个模块。但是在每个模块中，都会有一个带有browserHistory的react路由器。

• /login => 单独的页面（登录成功后会重定向到/dashboard）
• / 或 /dashboard 单独页面
• /user => 单独的页面，但子 URL 将由 React Router 处理。 （例如：/user/profile、/user/status 等）
• ...（每个主模块都有单独的页面

在后端，我将使用 PHP 框架（可能是 lumen 或 laravel）。

实现这一目标的正确方法是什么？

Answer 1

当您的用户尝试直接访问 /dashboard 时，此方法不起作用，无论用户是否登录，都会下载捆绑包。

更好的方法是 https://github.com/ReactTraining/react-router/blob/latest/docs/guides/DynamicRouting.md 基于路由提供包而不实际生成多个包（应用程序）。
您可以对所有请求使用身份验证标头，而不是隐藏您的 api 端点。

如果你使用 create-react-app 这篇博客文章是一个很好的起点https://www.drewbolles.com/blog/2016/11/14/webpack-code-splitting-with-create-react-app-react-router/