React利用路由实现登录界面的跳转

上一篇在配置好了webpack和react的环境后，接下来开始写登录界面，以及接下来的跳转到主页的功能。

1、首先看一下总体的目录结构。

因为很多时候在看别人写的例子的时候因为目录结构不熟悉后边会出现意想不到的岔子。

2、大体流程：

1）webpack配置入口文件src/index.js
2）运行index.html后首先加载入口文件src/index.js
3）加载路由表src/router/index.js
4）根据路由表中的配置会首先加载登录界面src/login.js
5）当在登录界面登录成功后跳转到src/components/myview.js
6）在myview文件中点击左侧菜单会分别显示指定页面（都是在路由表中配置）

3、写html文件。

其中，1）id为mycontent处是为了放置我们写的组件。
2）script中加载的文件时webpack打包后的js文件。

4、登录界面写在了login.js中

1）引入必要的模块：antd（ant design ）是一个组件库，我们项目中使用的组件都来自它。()（不引入antd.css时，那么界面显示不出来样式）

2）创建登录表单组件。除了基本的form、input、button组件外，实现跳转功能的主要是history.push('/view');（其中，history = this.props.history;）push函数中的路径是路由表中配置的路径（ ），二者要对应起来。

3、在第二步中我们已经把静态页面写出来了，接下来就是配置路由表**了。**我们将路由信息都配置在了router文件夹下的index.js中。react-router中文文档()，其中history的简单介绍可以参考()，比较容易快速理解。

代码如下：前三行中引入的模块是基本的模块，后边import的模块是写好的组件：首页显示login界面，登录成功后跳转到myview界面，mypicture和mydocument是在myview界面点击后所显示的组件。（嵌套路由）

4、接下来我们在src文件夹下的index.js（程序的入口文件）文件中写如下代码。

5、程序测试结果如下：

1）登录界面（login.js）：

2）输入用户名和密码点击登录后的跳转界面（myview.js）：

到此这篇关于react利用路由实现登录界面的跳转的文章就介绍到这了,更多相关react 路由实现登录跳转内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！