react登录跳转问题整理

  最近在学习react,想实现一个登录跳转的功能,在网络上查询了很多文档,大多都是未升级之前的版本,经过长时间的爬坑,终于实现了这个小例子,在此记录一下。

1.react-router-dom 

整个前端路由的选择在index.js页面

ReactDOM.render((
    <HashRouter>
        <div>
            <Route exact path="/" component={App}/>
            <Route path="/manage" component={Manage}/>
        </div>
    </HashRouter>
), document.getElementById('root'));
2.APP组件就是登录表单

class App extends Component {
  render() {
      var innerHeight = window.innerHeight;
    return (

            <div>
               <Layout>
                    <Content className="ant-layout-content-back" style={
  {height: innerHeight}}>
                        <LoginForm>
  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
React 中,登录成功跳转页面可以通过使用 React Router 实现。以下是一种常见的实现方式: 1. 首先,确保已经安装了 `react-router-dom` 包,可通过以下命令进行安装: ``` npm install react-router-dom ``` 2. 在你的应用程序中,创建一个路由组件,用于定义你的路由配置。例如,创建一个名为 `AppRouter.js` 的文件,并编写以下代码: ```jsx import React from 'react'; import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom'; // 导入登录页面和需要跳转的其他页面组件 import LoginPage from './LoginPage'; import HomePage from './HomePage'; const AppRouter = () => { return ( <Router> <Switch> <Route exact path="/login" component={LoginPage} /> <Route exact path="/home" component={HomePage} /> <Redirect to="/login" /> </Switch> </Router> ); }; export default AppRouter; ``` 3. 在 `LoginPage` 组件中,处理登录逻辑,并在登录成功后使用 `history.push()` 方法进行页面跳转。例如: ```jsx import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; const LoginPage = () => { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const history = useHistory(); const handleLogin = () => { // 处理登录逻辑,验证用户名和密码等 // 登录成功跳转到首页 history.push('/home'); }; return ( <div> <h2>Login Page</h2> <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Username" /> <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" /> <button onClick={handleLogin}>Login</button> </div> ); }; export default LoginPage; ``` 4. 在 `HomePage` 组件中,展示登录成功后的内容。例如: ```jsx import React from 'react'; const HomePage = () => { return ( <div> <h2>Welcome to Home Page</h2> {/* 在这里编写需要展示的内容 */} </div> ); }; export default HomePage; ``` 5. 在你的应用程序的入口文件中,渲染 `AppRouter` 组件。例如: ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import AppRouter from './AppRouter'; ReactDOM.render( <React.StrictMode> <AppRouter /> </React.StrictMode>, document.getElementById('root') ); ``` 这样,当用户在登录页面输入正确的用户名和密码后,点击登录按钮,就会跳转到首页。你可以根据需求自定义路由配置和跳转逻辑。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值