路由器无法在react-router

Question

我很容易做错我没看到的事情，但我尝试过三种方法而且都没有用......

我使用react-redux，react-router，react-router-dom和redux-observable的TypeScript Electron（这是无关紧要的）应用。我不认为大多数是密切相关的，但我无法让我的路线更新...

我知道有三种方法可以访问history.push。

• 从context抓取它。 我知道这很糟糕。
• 在创建历史记录时以及导入历史记录之前导出历史记录。 （不是这个的粉丝，它似乎不是惯用的）
• 使用withRouter和RouteComponentProps界面。

第一种方法是不稳定并且看起来很hacky。后两者都会导致同样的问题。确实发生了位置更改事件，但是因为push失败而我在props更改时我正在进行位置更改（我不喜欢此解决方案本身，但某事< / em>将监听状态更新是否是“容器组件”）它进入无限循环（直到路由器放弃），因为路径从不实际更新。

E.g。我在redux-logger：

中看到了这一点

{
  type: "@@router/LOCATION_CHANGE", 
  payload: {
   hash:"",
   pathname:"/home"
   ...
  }
  ...
}

这是正确的，但从不实际上改变了路线。

这是我的Routes.tsx文件：

export default () => (
  <App>
    <Switch>
      <Route path="/" component={LoginPage} />
      <Route path="/home" component={HomePage} />
    </Switch>
  </App>
);

将其拖入index.tsx，如此：

render(
  <AppContainer>
    <Root store={store} history={history} />
  </AppContainer>,
  document.getElementById('root')
);

if ((module as any).hot) {
  (module as any).hot.accept('./containers/Root', () => {
    const NextRoot = require('./containers/Root').default;
    render(
      <AppContainer>
        <NextRoot store={store} history={history} />
      </AppContainer>,
      document.getElementById('root')
    );
  });
}

并且，对于grins，这是尝试触发路由更改的组件，在这种情况下，当用户进行了身份验证时：

interface Props { }

interface InjectedProps extends RouteComponentProps<InjectedProps>{
  auth: AuthState
}

const mapStateToProps = (state: AppState): Props => ({
  auth: state.auth
});

export class LoginPage extends React.Component<RouteComponentProps<InjectedProps>> {
  constructor(props: RouteComponentProps<InjectedProps>) {
    super(props);
  }

  injectedProps(): InjectedProps {
    return this.props as InjectedProps;
  }

  componentWillReceiveProps(newProps: InjectedProps) {
    if(newProps.auth.authenticated) {
     this.props.history.push('/home');
    }
  }

  render() {
    return (
      <Login />
    );
  }
}

export default withRouter(connect(mapStateToProps)(LoginPage));

当然，我仍然习惯于TS / Redux作为一个整体（这可能是一种反模式的种类），但我在使用push时从未遇到过任何问题在一个普通的React Web应用程序中。

如果您对更好地构建此类应用程序有任何其他建议，我会全力以赴。理想情况下，我想让一个动作创建者触发这样的导航更改，这样我就可以保持组件的轻量级。

Answer 1

嗯，修复非常简单。

我只需要翻转路线。我不完全理解为什么会有效，这很麻烦。

export default () => (
  <App>
    <Switch>
      <Route path="/home" component={HomePage} />
      <Route path="/" component={LoginPage} />
    </Switch>
  </App>
);