React-маршрутизатор <Redirect /> во вложенном маршруте и с использованием response-redux - PullRequest
0 голосов
/ 09 апреля 2019

Когда я пытаюсь перейти с вложенного маршрута, я получаю пустую страницу.Похоже, что перенаправление обновляет местоположение только вложенного маршрута, поэтому, когда я нажимаю перенаправление на «внешний» маршрутизатор, URL обновляется правильно, но компонент не рендерится.

Моя настройка заключается в том, что я 'При использовании response-redux, наряду с response-redux-firebase и Reaction-router-dom, следующий код показывает, как я соединяю их во «внутреннем маршрутизируемом компоненте»

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)

, который является потомком

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

export default Intra;

, который, в свою очередь, является потомком

const App = () => (
  <Provider store={store}>
    <ReactReduxFirebaseProvider {...rrfProps}>
      <BrowserRouter>
        <Switch>
          {
            indexRoutes.map((prop, key) => {return <Route path={prop.path} key={key} component={prop.component}/>;})
          }
        </Switch>
      </BrowserRouter>
    </ReactReduxFirebaseProvider>
  </Provider>
);

export default App;

следующий скриншот пустого экрана с тем, что я получаю в дереве элементов, может быть иллюстративным

https://i.imgur.com/H7aF0b2.png

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...