When login button is clicked, console log output 'Redirecting..' is seen. But, the Welcome component is not seen. No errors are also logged.
import React, { useState } from 'react';
import { Redirect } from 'react-router-dom'
import './App.css';
import { Form, Input, Button, Checkbox } from 'antd';
function App() {
const bgstyle={
background:"linear-gradient(to right, #11998e, #38ef7d)",
height:"100vh",display: 'flex', justifyContent:'center', alignItems:'center',flexDirection: 'column'
}
let isLoggedIn = useState(false)
const onFinish= function onfinish(data){
isLoggedIn = data.password=="password"?true:false
if(isLoggedIn){
console.log('Redirecting..')
return <Redirect to='/Welcome/' />
}
}
return (
<div style={bgstyle}>
<h1 style={{color:'white'}}>Welcome</h1>
<Form onFinish={onFinish}>
<Form.Item name="username" rules={[{ required: true, message: 'Please enter your username!' }]}>
<Input placeholder="Username"/>
</Form.Item>
<Form.Item name="password" rules={[{ required: true, message: 'Please enter your password!' }]}>
<Input.Password placeholder="Password"/>
</Form.Item>
<Button type="primary" style={{width:200,borderColor:'gray',background:'gray'}} htmlType="submit">Login</Button>
</Form>
</div>
);
}
export default App;
Welcome.js code:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<p>Welcome</p>,
document.getElementById('root')
);
Should I use Route? What am I missing? I am just beginning in react. Please post any links that may help me understand more.