Question

当我尝试从嵌套路线出发时，我会得到空白页。似乎重定向仅在更新嵌套路由的位置，因此当我将重定向重定向到“外部”路由器时，URL已正确更新，但组件未呈现。

我的设置是我正在使用react-redux，react-redux-firebase和react-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

嵌套路由中的react-router <redirect>并使用react-redux

0 个答案: