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

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

import React from 'react' import {HashRouter as Router , Route , Switch} from 'react-router-dom' import { createBrowserHistory } from "history"; import MyView from '../components/myView.js' import LoginModule from '../login.js' import MyPicture from '../components/myPicture' import MyDocument from '../components/myDocument.js' export default class MyRoute extends React.Component{ render(){ return( <Router history={createBrowserHistory()}> <Switch> <Route exact path="https://www.jb51.net/" component={LoginModule}/> <MyView path='/View' component={MyDocument}> <Route path="/View/abc" component={MyDocument} /> <Route path="/View/myPicture" component={MyPicture} /> </MyView> </Switch> </Router> ) } }

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

import MyRoute from './router/index.js' import {render} from 'react-dom' import React from 'react' render( <MyRoute />, document.getElementById('myContent') );

5、程序测试结果如下：

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

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

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

您可能感兴趣的文章: