React-router in a nested route and using react-redux

manpreet Best Answer 3 years 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}/>;})