如何将login页面添加到react create app？

Question

我已经用react create app制作了一个小应用程序的原型（未被弹出）。

目前的应用只能通过axios从个人JAVA Spring服务器获取连接用户。

我想在我的应用中添加登录/主页。

这是我的登录/主页的模型：

• 1.进行API调用并验证登录并重定向到应用程序。

小应用程序的外观如下：

• 2.更改中间容器内容
• 3.断开并返回主页/登录页面

但我无法找到正确添加登录/主页到我的应用的方法。

• 也许有反应路由器，但如何？我的意思是，页面上的所有内容都会发生变化，我该如何链接？
• 我看到一些帖子谈论webpack和入口点？但是善良在所有可能性中迷失了自己。这迫使我弹出，这是我想避免的事情。
• 使用主页的创建应用创建另一个应用？不是很酷，我将如何链接它们？

所以路由器的方式似乎是好的。我应该尝试做一个topbar组件，当连接或不连接时，更改内容，样式和链接。

Answer 1

只需使用react-router即可。我相信这是预安装create-react-app。 Webpack入口点的内容与此无关。

从IMO的一些教程开始。 egghead.io有很棒的教程。

无论如何这里是react-router

Answer 2

启动此功能不是一个好主意，只为登录创建另一个应用程序，因为您将为同一个应用程序创建2个环境。您只需要为项目创建基本结构。

Webpack与应用程序的应用程序核心无关，他的角色只是编译和提供文件。

首先，为了创建一个漂亮友好的路由系统，需要在您的项目中使用react-router。以下是基本路由器容器的一些文档：https://reacttraining.com/react-router/web/guides/quick-start

因此，您的应用程序将使用由路由器管理的入口点，路由器将根据路由将用户重定向到不同的组件。

登录方法设计非常简单：

submit: function(e){
    e.preventDefault();
    alert('it works!');
  }

  render: function() {
    return (
      <form onSubmit={this.submit}>
        <button>Click me</button>
      </form>
    );
  }

但复杂的部分将是管理用户会话和断开部分，我推荐JWT系统，它非常强大且易于实现：https://auth0.com/blog/secure-your-react-and-redux-app-with-jwt-authentication/