React加Ant Design实现的一个登陆界面及小案例

好的，我可以为您提供一些代码示例和解释。

首先，我们需要安装 `antd` 和 `react-router-dom` 依赖。

npm install antd react-router-dom

然后，我们可以创建一个 `Login` 组件，作为登录界面。在这个组件中，我们可以使用 `antd` 的 `Form` ， `Input` 和 `Button` 组件来创建一个登录表单。

import React from 'react';
import { Form, Input, Button } from 'antd';

const Login = () => {
  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
      name="basic"
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="Username"
        name="username"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Login;

接下来，我们可以创建一个简单的应用程序，在其中使用 `react-router-dom` 来切换登录页面和其他页面。

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Login from './Login';

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/login">Login</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/login">
            <Login />
          </Route>
          <Route path="/">
            <h1>Welcome to the homepage!</h1>
          </Route>
        </Switch>
      </div>
    </Router>
  );
};

export default App;

最后，我们可以将应用程序渲染到页面上。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

这是一个简单的 React + Ant Design 登录界面和应用程序的示例。希望能对您有所帮助！