Question

我的反应应用程序中有3页。登录页面，主页和视频页面。

问题：单击登录按钮时，它会成功发出POST请求，但不会导航到下一页。单击登录按钮时，URL将更改为所需的路径，但视图不会更改。

尝试：1）我尝试使用这两件事：this.context.router.push（'/ app'）但是它给了我一个错误说Uncaught TypeError：无法读取未定义的属性'router' 2）我尝试使用browserHistory.push（'/ app'），但更改了网址而不是视图。

function getRoutes(store) {

    return (
        <Router history={browserHistory}>
            <Route path="/" component={LoginPage}/>
            <Route path='app' component={App}>
                <IndexRoute component={Home}/>
                <Route>
                    <Route path='/video-screen' component={VideoScreen}/>
                    <Redirect from='*' to='/'/>
                </Route>
            </Route>
        </Router>
    )
}
export default getRoutes;

下面是我的index.js文件，它是使用上述路由呈现Root的入口点。

window.Promise = Promise;
window.$ = window.jQuery = $;
injectTapEventPlugin();

var browserHistory = useRouterHistory(createHistory)({
    queryKey: false,
    basename: '/'
});

var initialState = window.INITIAL_STATE || {};

var store   = configureStore(initialState, browserHistory);
var routes  = getRoutes(store);
var history = syncHistoryWithStore(browserHistory, store, {
  selectLocationState: (state) => state.router
});

const ROOT_CONTAINER = document.getElementById('root');
const onRenderComplete = ()=> {
    console.timeEnd('render');
}

if ( __DEV__ ){
    window._STORE = store;
    window.React = React;
    window.ReactDOM = ReactDOM;
}
window.localStorage.debug = 'tessact:*'
window._History = history

let muiTheme = getMuiTheme(theme);

console.time('render');
match({ history, routes }, (error, redirectLocation, renderProps) => {
    ReactDOM.render(
        <MuiThemeProvider muiTheme={muiTheme}>
            <Root store={store}>
                <WithStylesContext onInsertCss={styles=> styles._insertCss()}>
                    <Router {...renderProps} />
                </WithStylesContext>
            </Root>
        </MuiThemeProvider>,
        ROOT_CONTAINER,
        onRenderComplete
    )
});

这是我的登录页面

export default class LogInComponent extends Component {
    handleLoginButtonClick() {
        var settings = {
            "async": true,
            "crossDomain": true,
            "url": "https://trigger-backend.appspot.com/auth/login/",
            "method": "POST",
            "credentials": 'include',
            "headers": {
                "content-type": "application/x-www-form-urlencoded",
            },
            "data": {
                "password": "apurv",
                "username": "Apurv"
            },
            success: function( data, textStatus, jQxhr ){
               alert("success");
            },
        }

        $.ajax(settings).done(function (response) {
            alert(response.auth_token);
            console.log('check');
            this.context.router.push('/app')
        });

    }


    render(){
        return (
            <div className="LoginPage">
                <div className="login-page">
                    <div className="form">
                        <form className="login-form">
                            <input id="username" type="username" placeholder="username"/>
                            <input id="password" type="password" placeholder="password"/>
                            <p className="message">Not registered? <a href="#">Request Username and Password</a></p>
                        </form>
                        <button onClick={this.handleLoginButtonClick.bind(this)}>login</button>
                    </div>
                </div>
                <img className="Logo_Tessact_White" src="./dev/js/images/TESSACT_logo_white.png"/>
            </div>
        );
    }
}

Answer 1

第一个问题在这里

$.ajax(settings).done(function (response) {
      alert(response.auth_token);
      console.log('check');
      this.context.router.push('/app')
});

this不再引用该组件，因为它在不同的范围内。请改用arrow function以重用组件的范围

$.ajax(settings).done((response) => { // arrow function
     alert(response.auth_token);
     console.log('check');
     this.context.router.push('/app')
});

没有绑定

在箭头函数之前，每个新函数都定义了它自己的这个值（在构造函数的情况下是一个新对象，在严格模式函数调用中是未定义的，如果函数被调用为＃34对象上下文对象;对象方法＆＃ 34;等。）

使用定义它的上下文（在本例中为您的组件）调用箭头函数

另一个问题在这里

LogInComponent.contextTypes = {
  router: React.PropTypes.func.isRequired
};

缺失，请添加。

此外，根据react-router的版本，您可能无法正确调用API，请查看此answer以获取更多信息。

路由器不导航到下一页但网址更改

1 个答案: