passing argument to react component with routes and links

Question

when i use the link hrf in the button element the onFinish function dosent work if i delete the link, the function well work and i get the userFound details but i needed to use the route and passing the userFound id i think the link work before the onFinish function thanks for help.

import { Form, Input, Button,Avatar, Switch} from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { BrowserRouter as Router,Link,Route} from 'react-router-dom'
import ConnectToServer from '../../scripts/connectToServer'
import './Login.css';
import SignUp from '../SignUp/SignUp.js';
import Admin from '../Admin/Admin';
import Student from '../Student/Student';
import {useEffect,useState} from "react"

 const Login = () => {
 const [userFound,setUserFound]=useState([]);
 const onFinish = async (values) => {
 let connectToServer=new ConnectToServer();
 let userFound1=await connectToServer.logIn(values)
 console.log(userFound1[0])
 setUserFound(userFound1[0]) 
};

return (

 <div className='logIn'>
  <Form
  name="normal_login"
  className="login-form"
  initialValues={{
    remember: true,
  }}
  onFinish={onFinish}
>
  
  <Avatar size={200} src="https://scontent.fsdv2-1.fna.fbcdn.net/v/t1.6435-9/109800995_1659772414198655_7015420379436172104_n.png?_nc_cat=100&ccb=1-5&_nc_sid=09cbfe&_nc_ohc=ARorupIF4d0AX9qbKUQ&_nc_ht=scontent.fsdv2-1.fna&oh=00_AT8MUjuhKdsG-wqMp2mEgXF3eypVGKSyd8XNuLRumgog6w&oe=6219247F"/>
  <Form.Item
    name="emailPhoneNumber"
    rules={[
      {
        required: true,
        message: 'Please input your phoneNumber or email!',
      },
    ]}
  >
    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="phoneNumber/email" />
  </Form.Item>
  <Form.Item
    name="password"
    rules={[
      {
        required: true,
        message: 'Please input your Password!',
      },
    ]}
  >
    <Input
      prefix={<LockOutlined className="site-form-item-icon" />}
      type="password"
      placeholder="Password"
    />
  </Form.Item>
  <Form.Item>
        {console.log(userFound)}
        {userFound.isAdmin?

        <Button type="link" href={`Admin/${userFound._id}`} htmlType="submit" className="login-form-button" >
          Login
        </Button>
        :
        <Button  type="link" href={`Student/${userFound._id}`} htmlType="submit" className="login-form-button">
          Login
        </Button>
        }
        
      
  </Form.Item>
</Form>

</div>

)
};

 export default Login;



 import './App.css';
 import Login from './components/LogIn/Login';
 import SignUp from './components/SignUp/SignUp.js';

 import Admin from './components/Admin/Admin';
 import Student from './components/Student/Student';
 import { BrowserRouter as Router,Link,Route} from 'react-router-dom'

 import { Tabs } from 'antd';
 const { TabPane } = Tabs;

 function App() {
    return (
    <Router>
   <div className="App">
   <Tabs>
   <TabPane tab="Login" key="login">
   <Route path="/" exact component={Login}/>
   <Route path="/Login/Student/:id" exact render={({match})=><Student  match={match}/>}/>
   <Route path="/Login/Admin/:id" exact render={({match})=><Admin  match={match}/>}/>
   </TabPane>

   <TabPane tab="Sign up" key="signup">
   <SignUp/>
   </TabPane>
  </Tabs> 
 
 </div>

  </Router>
 );
 }

 export default App;

Answer 1

Using an anchor tag and href effectively reloads the page. I don't think you need the state at all. Use the button to submit the form and make the call to the server, then use the history object to issue the imperative navigation.

import { generatePath, useHistory } from 'react-router-dom';

const history = useHistory();

const onFinish = async (values) => {
  const connectToServer = new ConnectToServer();
  const [userFound] = await connectToServer.logIn(values) || [];
  console.log(userFound);

  if (userFound) {
    const { _id, isAdmin } = userFound;
    history.push(generatePath("/Login/:isAdmin/:id", {
      id: _id,
      isAdmin: isAdmin ? "Admin" : "Student",
    }));
  }
};

...

<Form.Item>
  <Button type="button" htmlType="submit" className="login-form-button" >
    Login
  </Button>
</Form.Item>