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;

Why are you setting local state if you want to navigate to another route/page/component? — Drew Reese, Jan 31 '22 at 08:10

Drew Reese · Accepted Answer · 2022-01-31T08:23:50.050

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>

edited Jan 31 '22 at 08:23

answered Jan 31 '22 at 08:15

Drew Reese

165,259
14
153
181

can i use redirect here ?? my mentor he ask me to use redirect and i dont believe redirect its work at this moment – Rian Halabi Jan 31 '22 at 10:06
@RianHalabi Redirect, sure, use `history.replace` instead. – Drew Reese Jan 31 '22 at 16:42
thank youu so much for your help i did that code after the form block and this also works thank you {Object.keys(userFound).length>=1? userFound.isAdmin?: :null} – Rian Halabi Jan 31 '22 at 16:52

passing argument to react component with routes and links

1 Answers1