React路由器浏览器返回按钮无法正常工作。

Question

React路由器浏览器返回按钮无法正常工作。

javascriptreactjsreact-router

13

我正试图使用React JS和react-router创建一个多步表单。

表单步骤通过状态变化来改变。如果我点击下一步按钮，状态步骤会递增并显示下一个步骤。

但是这样的话，如果我在第三步，然后在浏览器中点击返回，我会被重定向到主页而不是上一个步骤。

我的主要组件大致如下：

componentWillMount(){
    console.log(this.props.params.id);
}

onButtonClick(name, event) {
    event.preventDefault();

    switch (name) {
        case "stepFourConfirmation":
            if(this.validation("four")) {
                this.props.actions.userRegistrationThunk(this.state.user);
                this.setState({step: 5, user: {}});
            }
            break;
        case "stepTwoNext":
            if(this.validation("two")) {
                this.setState({step: 3});
                this.context.router.push("stepThree");
            }
            break;
        case "stepThreeFinish":
            this.setState({step: 4});
            break;
        default:
            if(this.validation("one")) {
                this.setState({step: 2});
                this.context.router.push('stepTwo');
            }
    }
}

每次点击按钮，我都会将参数推送到URL并更改步骤。当我点击下一步时，它完美地工作。在componentWillMount中，我正在尝试从URL获取参数，然后根据参数减少步骤。

但是只有在加载第一步时，我才会在控制台中看到stepOne。如果我点击下一步，我会得到 [react-router] Location“ stepTwo”与任何路由不匹配

我的routes.js文件如下：

    import React from 'react';
import {IndexRoute, Route} from 'react-router';

import App from './components/App';
import HomePage from './components/HomePage';
import Registration from './components/registration/RegistrationPage';

import UserPage from './components/user/userHome';
import requireAuth from './common/highOrderComponents/requireAuth';
import hideIfLoggedIn from './common/highOrderComponents/hideIfLoggedIn';

import PasswordReset from './common/passwordReset';

const routes = (
    <Route path="/" component={App}>
        <IndexRoute component={HomePage}/>
        <Route path="registration/:id" component={hideIfLoggedIn(Registration)}/>
        <Route path="reset-password" component={PasswordReset} />
        <Route path="portal" component={requireAuth(UserPage)} />
    </Route>
);

export default routes;

有什么建议可以解决这个问题吗？

- Boky

你能提供一个要点概述吗？ - Kokovin Vladislav

用我的全部代码？还是为每个表单步骤使用组件？ - Boky

至少包括主要组件。更多相关信息更好。 - Kokovin Vladislav

这是链接：https://gist.github.com/Borisboky/b90b1a338ac9cfc5ba484d5aa1e11c3d - Boky

你尝试过使用 browserHistory.push(<your-route>) 吗？ - U r s u s

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jkettmann · Accepted Answer

尝试推送绝对路径。而不是使用相对路径。

this.context.router.push("stepTwo");

尝试

this.context.router.push("/registration/stepTwo");

此外，您的生命周期方法存在问题。componentWillMount仅被调用一次。当您推送下一个路由时，组件不会再次挂载，因此您将看不到具有下一个参数的日志。使用componentWillMount进行初始日志记录，使用componentWillReceiveProps进行下一个日志记录：

componentWillMount() {
  console.log(this.props.params.id);
}

componentWillReceiveProps(nextProps) {
  console.log(nextProps.params.id);
}

顺便提一下: 这里有一个在Github上的讨论。创建者们表示，React路由不支持相对路径。