Categories

See More
Popular Forum

MBA (4887) B.Tech (1769) Engineering (1486) Class 12 (1030) Study Abroad (1004) Computer Science and Engineering (988) Business Management Studies (865) BBA (846) Diploma (746) CAT (651) B.Com (648) B.Sc (643) JEE Mains (618) Mechanical Engineering (574) Exam (525) India (462) Career (452) All Time Q&A (439) Mass Communication (427) BCA (417) Science (384) Computers & IT (Non-Engg) (383) Medicine & Health Sciences (381) Hotel Management (373) Civil Engineering (353) MCA (349) Tuteehub Top Questions (348) Distance (340) Colleges in India (334)
See More

React-router <Redirect/> in a nested route and using react-redux

General Tech Bugs & Fixes

Max. 2000 characters
Replies

usr_profile.png

User

( 6 months ago )

 

When i try to from a nested route I end up with a blank page. It seems like redirect is updating the location only of the nested route, so when i hit a redirect to the "outer" router the URL is updated correctly but the component does not render.

My setup is that I'm using react-redux, alongside react-redux-firebase and react-router-dom, the following code shows how I am connecting them in the 'inner routed component'

function SignIn(props) {
  const { classes } = props;
  const handleSubmit = (event) => {
    event.preventDefault();
    props.firebase.login({
      email: event.target.email.value,
      password: event.target.password.value
    });
  };

  if (!isLoaded(props.auth)) {
    return null
  }
  if (isEmpty(props.auth)) {
    return (
      <Button
              type="submit"
              fullWidth
              variant="contained"
              color="primary"
              className={classes.submit}
      >
        Sign in
      </Button>
    );
  } else {
    return (
      <Redirect to={'/'}/>
    )
  }
}

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

const mapDispatchToProps = dispatch => {
  return {
    clearFirestore: () => dispatch({ type: '@@reduxFirestore/CLEAR_DATA' })
  }
};
export default compose(
  withRouter,
  withStyles(styles),
  connect(mapStateToProps, mapDispatchToProps),
  firebaseConnect()
)(SignIn)

that is a child of

const Intra = ({ match }) => (
  <div>
    <BrowserRouter>
      <Switch>
        {
          intraRoutes.map((prop, key) => {return <Route exact path={`${match.path}${prop.path}`} key={key} component={prop.component}/>;})
        
									

what's your interest