Question

我正在使用react和redux来处理我的应用程序。我的路线定义如下

<HashRouter>
    <div className="container">
        <Route path="/register" component={Register} />
        <Route path="/login" component={Login} />
    </div>
</HashRouter>

我已将我的组件定义为

export default connect(mapStateToProps)(Login);
export default connect(mapStateToProps)(Register);

现在注册完成后，我想将用户重定向到login页面。因此，当登录成功后，我将我从login函数重定向到UserAction，如下所示

UserService.register(user)
    .then(
            user => {
                dispatch(success());
                history.push('/#/login'); //<== here is the issue
            },
            error => {
                dispatch(failure(error));
            }
        );

上面的history.push更改了网址，但未加载Login组件。

我也试过

export default withRouter(connect(mapStateToProps)(Login));
export default withRouter(connect(mapStateToProps)(Register));

但仍然没有运气。任何解决方案如何解决这个问题？

注意：我没有使用react-router-redux

Answer 1

为什么你甚至想用历史推送改变路线？

可以通过location.hash方法轻松完成（因为您使用的是HashRouter），当然浏览器和反应本身足以将其保存在浏览器的历史记录中。

因此，每当您想要更改网址时，只需使用以下内容：

location.hash = "/myroute/10/secondroute"

并且请记住，您可以使用<Link>组件使用react-router本身更改网址，而不必费心去管理哈希或历史记录。

Link为您的应用程序提供声明性的，可访问的导航。

<强>用法：

import { Link } from 'react-router-dom'

<Link to="/about">About</Link>

OR

<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}/>

More informations

Answer 2

你试过了吗？

this.context.router.push('/page');

至少你能告诉我你的redux-router版本是什么吗？

在你的索引文件中，我建议你：

import routes from './routes'
    ReactDOM.render((
      <Provider store={store}>
        <Router history={hashHistory} routes={routes}/>
      </Provider>), document.getElementById('root')
    );

在您的路线档案中：

<Route path="/" component={App}>
    <IndexRoute component={requireAuth(Home)}/>
    <Route path="signup" component={SignUp}/>
</Route>

您的控制台是否有错误？

React router history.push更新URL但与redux一起使用时不更新组件

2 个答案: