Question

我从一个页面重定向到另一页面时遇到问题。我使用了react-router-dom中的Link。问题是，每当我单击链接时，我都可以看到URL发生了变化。但是，页面仍然保持不变。我必须手动单击URL，然后单击Enter以重定向页面。我包括了代码以及浏览器的图片。

Color oldColor = GUI.backgroundColor;
GUI.backgroundColor = Color.red;

// make copy of default button style 
GUIStyle buttonStyle = new GUIStyle(GUI.skin.button);

// change font size
buttonStyle.fontSize = 18;

bool searchButton = GUI.Button(new Rect(0, 55, 390, 30), "Search", buttonStyle);
if (searchButton) {
    // ...
}

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)

Here is the picture of how it looks like

Answer 1

在某些情况下，您不应使用<Navlink>来重定向用户

有一个Redirect pkg的react-router-dom组件

您需要做的就是更改此

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页面。

Answer 2

我相信您在将路由器映射到index.js时遇到一些问题

如果url改变意味着react-router-dom并且可以正常工作。

也许您在映射和组件方面遇到了麻烦。其他页面有同样的麻烦吗？您可以与我们分享index.js代码吗？

Answer 3

<Link />是用于React-Dom重定向的React-DOM组件，因此单击它可以更改URL并相应地重新安装<Route/> s。对于真正的http重定向，您可以使用旧的<a />

React.js重定向到另一个页面

3 个答案: