Reactjs redirecting to another page

Question

I have a problem with redirecting from one page to another. I used Link from the react-router-dom. The problem is that whenever I click on the link, I can see that the url changes; however, the page still stays the same. I have to manually click on the url and click enter to redirect the page. I included the code as well as the picture of the browser.

 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> 

Here is the picture of how it looks like

Answer 1

you should not use <Navlink> to redirect user under some condition

there is a Redirect component that comes from react-router-dom pkg

all you need to do is just change this

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

to something like this

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

first of , please import it from react-router-dom then use it.

basically you saying that if your user is logged in ( this.state.user ) , then redirect to /path/that/in/your/mind page.

Answer 2

I believe you have some issues on the router mapping, into the index.js

If the url changes that mean react-router-dom and work fine.

Maybe you have some trouble with mapping and component. Other pages have the same trouble? Can you share to us the index.js code?

Answer 3

<Link /> is a React-DOM component meant for React-Dom redirects, so clicking on it changes the url and remounts the <Route/> s accordingly. For a real http redirect you could use the good old <a />