反应路由器dom在一定条件下不工作

问题描述

我正在使用React样板和dandelion模板，除非有某种条件，否则我有一种像魅力一样起作用的路线，这些路线都不起作用。 API上有一个条件，只允许用户打开一个选项，如果此条件为true，则路由根本不起作用。

我的index.js：

const App = () => (
  <ThemeWrapper>
    <AppContext.Consumer>
      {changeMode => (
        <Switch>
          <Route path="/" exact component={MainDedicated} />
          <Route
            path="/app"
            render={props => <Application {...props} changeMode={changeMode} />}
          />
          <Route component={NotFound} />
        </Switch>
      )}
    </AppContext.Consumer>
  </ThemeWrapper>
);

我的Application.js：

class Application extends React.Component {
  constructor(props) {
    super(props);

  ...

  render() {
    const { changeMode,history ... } = this.props;

    ...
    return (
      <>
        <Dashboard history={history} changeMode={changeMode}>
            <Switch>
              <Route path="/app/this_route" component={MainComp} />
              {!condition && <>
                 <Route path="/app/this_route_1" component={Comp1} />
                 <Route path="/app/this_route_2" component={Comp2} />
              </>}
              <Route component={NotFound} />
            </Switch>
          )}
        </Dashboard>
    
        {condition && (
          //Here I warn the user... and then 

          history.push('/app/this_route');

          // or history.replace('/app/this_route'); does not work either
        )}
      </>
    );
  }
}

Application.propTypes = {
  changeMode: PropTypes.func.isrequired,history: PropTypes.object.isrequired,actions: PropTypes.object.isrequired,location: PropTypes.object.isrequired,...
};

const mapStatetoProps = createStructuredSelector({
  ...
});

const mapdispatchToProps = dispatch => ({
  actions: bindActionCreators(Object.assign({},{ ... }),dispatch),dispatch
});

const withConnect = connect(mapStatetoProps,mapdispatchToProps);
const withReducer = injectReducer({ key: 'app',reducer });
const withSaga = injectSaga({ key: 'app',saga });

export default compose(withReducer,withSaga,withConnect)(Application);

如果condition为false，这些路由就可以清楚地知道了，一旦条件为true，那么甚至/app/this_route都不起作用。

我尝试使用history.push('/app/this_route');，并且浏览器的地址栏已更新，但路由被完全忽略。另外window.loaction.replace('...') ...我将历史记录更新为版本4.10.1，我使用的是react-router-dom 5.1.2，看来没有任何工作对我有用。

编辑：两种情况均在应用加载时发生。

我在这里想念的是什么，或者是哪里错了？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）