Question

当我选择登录页面中的登录按钮时，我旨在显示“ SignIn”组件。但是，选择按钮后仍会显示登录页面中的组件。这是一些说明此问题的图像。

问题是第二张图片。可能是最大的原因？

我们非常感谢您的投入。

代码-主页（LandingPage）：

import React from 'react';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import { Link } from 'react-router-dom';
import * as ROUTES from '../../routes.jsx';
import './LandingPage.css'

export default class LandingPage extends React.Component {
    render() {
        return(
            <div>
            <Button className="signInButton" variant="light"><Link to={ROUTES.SIGN_IN}>Sign In</Link></Button>
            <h1 className="landingBanner" >Streamosphere</h1>
            <SignUpFormBase/>
        </div>
    );
  }
}

const INITIAL_STATE = {
  email: '',
  password: '',
  error: null,
};


export default class SignUpFormBase extends React.Component {
   constructor(props) {
       super(props);

    this.state = { ...INITIAL_STATE };
  }
onSubmit = event => {
    console.log("Props");
    console.log(this.props);
    const { history } = this.props;
    const { email, password } = this.state;
    this.props.firebase
        .doCreateUserWithEmailAndPassword(email, password)
        .then(authUser => {
          this.setState({ ...INITIAL_STATE });
        })
        .catch(error => {
          this.setState({ error });
        });

    event.preventDefault();
};

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

render() {
  const {
        email,
        password,
        error,
    } = this.state;
    const isInvalid = password === '' || email === '';

    return (

      <Form className="signUpForm"
            onSubmit={this.onSubmit}>
        <h1 className="signUpBanner">Sign Up </h1>

        <Form.Group controlId="formSignUpEmail">
          <Form.Label>Email address</Form.Label>
          <Form.Control name="email"
                        value={email}
                        onChange={this.onChange}
                        type="email"
                        placeholder="Enter email" />
          <Form.Text className="text-muted">
            We'll never share your email with anyone else.
          </Form.Text>
        </Form.Group>

        <Form.Group controlId="formSignUpPassword">
          <Form.Label>Password</Form.Label>
          <Form.Control name="password"
                        value={password}
                        onChange={this.onChange}
                        type="password"
                        placeholder="Password" />
        </Form.Group>
        <Button type="submit"
                disabled={isInvalid}
                className="signUpButton"
                variant="light" >
          Sign Up
        </Button>
        {error && <p>{error.message}</p>}
    </Form>
    );
  }
}

const SignUpLink = () => (
    <p>
      Already have an account? <Link to={ROUTES.SIGN_IN}>Sign In</Link>
    </p>
);

登录（带有登录组件的文件）：

 import React, { Component } from 'react';
 import SignUpLink from './LandingPage.jsx'
 import * as ROUTES from '../../routes.jsx';
 import Form from 'react-bootstrap/Form';
 import Button from 'react-bootstrap/Button';
 import './LandingPage.css'

export default class SignInPage extends Component {
    render() {
        return(
            <div>
                <h1 className="landingBanner" >Streamosphere</h1>
                <SignInFormBase/>
                <SignUpLink />
            </div>
        );
    }
}

const INITIAL_STATE = {
    email: '',
    password: '',
    error: null,
};

export default class SignInFormBase extends Component {
    constructor(props) {
        super(props);

        this.state = { ...INITIAL_STATE };
    }

    onSubmit = event => {
        const { email, password } = this.state;

        this.props.firebase
            .doSignInWithEmailAndPassword(email, password)
            .then(() => {
                this.setState({ ...INITIAL_STATE });
                this.props.history.push(ROUTES.HOME);
            })
            .catch(error => {
                this.setState({ error });
            });

        event.preventDefault();
    };

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

    render() {
        const { email, password, error } = this.state;

        const isInvalid = password === '' || email === '';

        return (
            <Form className="signUpForm"
                  onSubmit={this.onSubmit}>
            <h1 className="signUpBanner"> Sign In </h1>
            <Form.Group controlId="formSignInEmail">
                <Form.Label>Email address</Form.Label>
                <Form.Control name="email"
                              value={email}
                              onChange={this.onChange}
                              type="email"
                              placeholder="Enter email" />
                <Form.Text className="text-muted">
                    We'll never share your email with anyone else.
                </Form.Text>
            </Form.Group>
            <Form.Group controlId="formSignInPassword">
                <Form.Label>Password</Form.Label>
                <Form.Control name="password"
                              value={password}
                              onChange={this.onChange}
                              type="password"
                              placeholder="Password" />
            </Form.Group>
            <Button type="submit"
                    disabled={isInvalid}
                    className="signUpButton"
                    variant="light" >
                Sign In
            </Button>
            {error && <p>{error.message}</p>}
        </Form>
      );
  }

} URL路由（routes.jsx）：

export const LANDING = '/';
export const SIGN_IN = '/signin';
export const HOME = '/home';
export const ACCOUNT = '/account';

App.jsx（进入点，其中LandingPage是呈现的第一页）：

import { Route } from 'react-router'
import React from 'react';
import LandingPage from './components/containers/LandingPage'
import SignInPage from './components/containers/SignIn'
import HomePage from './components/containers/HomePage'
import * as ROUTES from './routes.jsx';

class App extends React.Component {
    render() {
        return (
            <div>
                <Route exact path={ROUTES.LANDING} component={LandingPage} />
                <Route path={ROUTES.HOME} component={HomePage} />
                <Route path={ROUTES.SIGN_IN} component={SignInPage} />
            </div>
        );
    }
}

export default App;

Answer 1

这是因为Link中的react-router-dom。您可以通过重新加载整个页面来规避它。例如，改用<a href="/sign-in></a>。

Answer 2

您需要用App将所有路由包装在Switch中，这样只会呈现一个匹配的子组件。

// App.jsx
import { Route, Switch } from 'react-router'
import React from 'react';
import LandingPage from './components/containers/LandingPage'
import SignInPage from './components/containers/SignIn'
import HomePage from './components/containers/HomePage'
import * as ROUTES from './routes.jsx';

class App extends React.Component {
    render() {
        return (
            <Switch>
                <Route exact path={ROUTES.LANDING} component={LandingPage} />
                <Route path={ROUTES.HOME} component={HomePage} />
                <Route path={ROUTES.SIGN_IN} component={SignInPage} />
            </Switch>
        );
    }
}

export default App;

如何修复组件显示重叠

2 个答案: