Question

我正在尝试创建一个表单，当我单击一个按钮后，替换为另一个表单。我尝试使用“链接到”，但是在单击按钮后，另一个表单出现在第一个表单中。如何更改我的代码以更正此问题？

我的App.js：

import React, { Component } from 'react';
import './App.css';
import Login from "./Login";

class App extends Component {
  render() {
    return (
      <div className="App">
        <Login />
      </div>
    );
  }
}

export default App;

我的Login.js：

import React from 'react';
import CreateUser from "./CreateUser";
import GetUser from "./GetUser";
import { BrowserRouter as Router, Link, Route} from 'react-router-dom';

export default class Login extends React.Component {
  state = {
    email: '',
    password: '',
  };

  change = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  onSubmit = (e) => {
    e.preventDefault();
    console.log(this.state);
  };

  render() {
    return (
      <form>
        <br />
        Login
        <br />
        <br />
        <input
        name="email"
        placeholder='email'
        value={this.state.email}
        onChange={e => this.change(e)}
        />
        <br />
        <br />
        <input
        name="password"
        type='password'
        placeholder='password'
        value={this.state.password}
        onChange={e => this.change(e)}
        />
        <br/ >
        <br/ >
        <Router>
        <div>
        <button onClick={e => this.onSubmit(e)}>
        <Link to="/GetUser">Login</Link>
        <Route exact path="/GetUser" component={GetUser}/>
        </ button>
        <br/ >
        <br/ >
        <button onClick={e => this.onSubmit(e)}>
        <Link to="/CreateUser">Sign Up</Link>
        <Route exact path="/CreateUser" component={CreateUser}/>
        </button>
        </div>
        </Router>
  </form>
    );
  }
}

当我单击“登录”按钮时，“登录”表单中会出现“GetUser”表单，但我希望GetUser表单替换“登录”表单。

总而言之，爱德华多·格里斯

Answer 1

Route会准确呈现您将其放入组件的位置。当找到匹配项时，它将使用组件GetUser替换Route。因此，您希望GetUser呈现在您定义路径的位置。您无需像现在这样共存链接和路由。

因此，对于具有视图的公共布局，该视图将被替换为不同的组件，视图应表示为Switch，并且将呈现匹配的第一个路径：https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Switch.md

在您的情况下，您需要一个具有switch语句的父组件，该语句可以呈现登录以及其他路由，您不想尝试在Login组件中执行所有操作。

反应形式发生变化

1 个答案: