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 路由实现登录跳转内容请搜索剧本之家以前的文章或继承欣赏下面的相关文章但愿各人今后多多支持剧本之家！

您大概感乐趣的文章: