16 React——JS跳转路由（实现登陆功能）

 运用JS跳转路由实现登录功能。具体操作如下：

1 定义一个登录组件，里面包含两个输入框，一个提交按钮，三个表单控件写在一个

标签里，同时，我们定义form的onSubmit事件，阻止它提交页面防止页面刷新，如下：

 

2 我们在表单提交事件中获取输入框的值，并做判断，在此处使用了ref操作dom的写法，当然，我们也可以使用react双向绑定数据的写法，如下：

3 我们在构造函数里定义了一个值，默认为false，如果登陆成功，我们就将它修改为true，如下：

4 然后组件会再次去渲染数据，所以我们在render函数中去判断构造函数中的这个值，如果是true，就用跳转到首页，在此基础之前，我们也要在首页中配一下路由，如下：

主页组件配路由：

跳转到首页：

至此，一个登录功能已经实现。

 

总结如下;