Переадресация Reactjs на другую страницу

Question

У меня проблема с перенаправлением с одной страницы на другую. Я использовал Ссылку от реакции-маршрутизатора-дом. Проблема в том, что всякий раз, когда я нажимаю на ссылку, я вижу, что URL меняется; однако страница остается прежней. Я должен вручную нажать на URL и нажать Enter, чтобы перенаправить страницу. Я включил код, а также изображение браузера.

import React, { Component } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Row, Col } from 'reactstrap';
import { NavLink } from 'reactstrap';
import {Link} from 'react-router-dom';

import { login, logout, register } from '../actions/auth';
import { connect } from 'react-redux';
class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false,
      nestedModal: false,
      closeAll: false,
      email: '',
      password: '',

      confirmPassword:'',
      registerEmail: '',
      registerPassword: '',
      firstName:'',
      lastName:'',
      address:'',
      city:'',
      state:'',
      zipcode:'',
      phoneNumber:'',
      user: {},
      isLoggedIn: false
    };

  }
  
  static getDerivedStateFromProps(props, state) {
    if (props.user !== state.user){
      return {
        ...state,
        user: props.user
      };
    }
    return null;
  }

  toggle() {
    this.setState({
      modal: !this.state.modal
    });
  }

  userLogin (e) {
    e.preventDefault();
       this.props.login({
         email: this.state.email,
         password: this.state.password
       });
       this.setState({
         modal: !this.state.modal,
         isLoggedIn: true
       });
  }

  userRegister (e) {
    e.preventDefault();
       this.props.register({
         email: this.state.registerEmail,
         password: this.state.registerPassword,
         name: this.state.firstName + ' ' + this.state.lastName,
         address:this.state.address + ' ' + this.state.city + ' ' + this.state.state + ' ' + this.state.zipcode,
         city:this.state.city,
         state:this.state.state,
         zipcode:this.state.zipcode,
         confirmPassword: this.state.confirmPassword,
         phoneNumber: this.state.phoneNumber
       });
       this.setState({
         modal: !this.state.modal
       });
  }

  userLogout(e){
    e.preventDefault();
    this.props.logout();
    this.setState({
      isLoggedIn:false
    })
  }


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

  }

  toggleNested() {
    this.setState({
      nestedModal: !this.state.nestedModal,
      closeAll: false
    });
  }

  toggleAll() {
    this.setState({
      nestedModal: !this.state.nestedModal,
      closeAll: true
    });
  }


  render() {
    if (this.state.user)
      return(
        <div>  <NavLink style={{ cursor: 'pointer' }} onClick={this.userLogout.bind(this)}>Log Out</NavLink></div>
      );

    else
      return (
        <div >
          <NavLink style={{ cursor: 'pointer' }} onClick={this.toggle.bind(this)}>Log In</NavLink>
          <Modal isOpen={this.state.modal} toggle={this.toggle.bind(this)} className={this.props.className}>

            <ModalHeader className="login-header" toggle={this.toggle.bind(this)}>Welcome Back! </ModalHeader>

            <ModalBody>
              <Form className = "login-body"   >
                  <FormGroup>
                      <Label for="exampleEmail">Email:</Label>
                      <Input type="email" name="email" value={this.state.email} onChange={this.handleChange.bind(this)} id='exampleEmail' placeholder="Enter Your Email" />
                  </FormGroup>

                  <FormGroup>
                      <Label for="examplePassword">Password:</Label>
                      <Input type="password" name="password" value={this.state.password}  onChange={this.handleChange.bind(this)} id='examplePassword' placeholder="Enter Your Password" />
                  </FormGroup>
              </Form>

              <Link to='/register'>Not a member yet? Sign Up</Link>
            </ModalBody>

            <ModalFooter>
              <Button color="info" onClick={this.userLogin.bind(this)}>Log In</Button>{' '}
              <Button color="secondary" onClick={this.toggle.bind(this)}>Cancel</Button>
            </ModalFooter>
          </Modal>
        </div>
      );
  }
}

const mapStateToProps = state => {
    if(!!state.auth.user){
        return {
            isLoggedIn: !!state.auth.user,
            user: state.auth.user.data
        };
    }
}

export  default connect(mapStateToProps, { login, logout, register })(Login)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>

Вот изображение того, как это выглядит

Answer 1

Я полагаю, у вас есть некоторые проблемы с отображением маршрутизатора в index.js

Если URL-адрес изменяется, это означает, что реакция-маршрутизатор-дом и работает нормально.

Может быть, у вас есть проблемы с отображением и компонентом. Другие страницы имеют такую ​​же проблему? Можете ли вы поделиться с нами кодом index.js?

Answer 2

<Link /> - это компонент React-DOM, предназначенный для перенаправлений React-Dom, поэтому нажатие на него изменяет URL и соответственно перемонтирует <Route/> s. Для реального http перенаправления вы можете использовать старый добрый <a />

Answer 3

вы не должны использовать <Navlink> для перенаправления пользователя при некоторых условиях

есть Redirect компонент, который приходит от react-router-dom pkg

все, что вам нужно сделать, это просто изменитьэто

if (this.state.user)
  return(
    <div>  <NavLink style={{ cursor: 'pointer' }} onClick={this.userLogout.bind(this)}>Log Out</NavLink></div>
  );

примерно так:

if (this.state.user) {
  <Redirect to='/path/that/in/your/mind'>
}

сначала, пожалуйста, импортируйте его из react-router-dom, затем используйте.

в основном вы говорите, что если ваш пользовательвходит в систему (this.state.user), затем перенаправляется на страницу /path/that/in/your/mind.