Реагировать компонент не рендеринг с Link - PullRequest
0 голосов
/ 23 сентября 2018

У меня проблема с использованием маршрутизатора реагировать, редуцировать и реагировать.

Когда я перемещаюсь по страницам с использованием , компоненты не полностью повторно визуализируются.

Например: еслиЯ нахожусь на странице входа в систему и перехожу на страницу регистрации (используя ссылку), в последнем случае некоторые элементы css / js не будут отображаться правильно.

Вот мой код: (без импорта и не имеет значениядетали)

Основной компонент

class App extends Component {

  render() {
    return (
      <div className="container-scroller">
        <LoadingBar showFastActions style={{ backgroundColor: 'orange', height: '4px' }}  />
        <BrowserRouter>
          <Router history={History}>
            <Switch>
              <PrivateRoute exact path="/" component={DashboardPage} />
              <PrivateRoute exact path="/facility" component={FacilityPage} />
              <Route exact path="/register" component={RegisterPage} />
              <Route exact path="/signin" component={SignInPage} />
              <Route exact path="/signout" component={Signout} />
              <Route component={NotFoundPage} />
            </Switch>
          </Router>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;

Страница входа:

class SignInPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: '',
      password: ''
    };
  }

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

  handleSubmit = e => {
    e.preventDefault();
    this.props.signIn(this.state.inputEmail, this.state.inputPassword);
  }

  render() {

    {/* redirect user if already logged in */}
    let token = localStorage.getItem('token');
    if (token) {
      return <Redirect to='/' />
    }

    return (
      // sign in form
      <div className="mt-3 text-center">
        <Link to="/register" className="auth-link text-white">
          Don't have an account ?
          <span class="font-weight-medium"> Sign in</span>
        </Link>
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    errors: state.auth.errors,
  };
}

const mapDispatchToProps = dispatch => {
  return {
    signIn: (email, password) => {
      return dispatch(userActions.signIn(email, password));
    }
  };
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SignInPage));

Страница регистрации:

import '../../node_modules/jquery-validation/dist/jquery.validate.min.js';
import '../assets/js/form-validation.js';

class RegisterPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: '',
      password: '',
      password_confirmation: '',
      first_name: '',
      last_name: '',
    };
  }

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

  handleSubmit = e => {
    e.preventDefault();
  }

  render() {

    {/* redirect user if already logged in */}
    let token = localStorage.getItem('token');
    if (token) {
      return <Redirect to='/' />
    }

    return (
      // register form
    )
  }
}

const mapStateToProps = state => {
  return {
    errors: state.users.errors,
  };
}

const mapDispatchToProps = dispatch => {
  return {
    signIn: (email, password, firstName, lastName) => {
      return dispatch(userActions.register(email, password, firstName, lastName));
    }
  };
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(RegisterPage));

Кажется, я не единственный, у кого есть эта проблема.Я пробовал решение withRouter, и оно не работает.

Кто-нибудь может мне помочь?

Заранее спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...