传递参数以使用路由和链接对组件做出反应

Question

当我在按钮元素中使用 link hrf 时，onFinish 函数开始工作如果我删除 link，该函数运行良好并且我得到了 userFound 的详细信息但我需要使用路线并传递 userFound id 我认为 link 在 onFinish 函数之前工作感谢您的帮助。

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

使用锚标记和 href 可以有效地重新加载页面。我认为你根本不需要国家。使用按钮提交表单并调用服务器，然后使用 history 对象发出命令式导航。

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>

传递参数以使用路由和链接对组件做出反应

passing argument to react component with routes and links

reactjs

react-router

ant-design-pro