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

Question

我已经做了一个小应用程序的原型与react创建应用程序 （没有弹出）。

该应用目前只能通过带有axios的个人JAVA弹簧服务器连接用户。

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

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

• 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认证/