react-router-redux를 example으로 설정했습니다. 그러나 dispatch(push(url))
은 주소 표시 줄의 콘텐츠 /보기 또는 URL을 변경하지 않습니다. 내 콘솔에서 LOCATION_CHANGE 및 CALL_HISTORY_METHOD가 주어진 주소로 성공적으로 호출되었음을 알 수 있습니다. 이 경우 로그인이 성공하면 예상 한 redirect
주소가로드되지 않습니다.react-router-redux가 콘텐츠 /보기를 변경하지 않습니다.
행동에 기호
export function loginUser(email, password, redirect="/dashboard") {
return function(dispatch) {
dispatch(loginUserRequest());
return fetch(`http://localhost:3000/users/sign_in/`, {
...
})
.then(parseJSON)
.then(response => {
try {
let decoded = jwtDecode(response.token);
dispatch(loginUserSuccess(response.token));
dispatch(push(redirect));
} catch (e) {
...
}
})
}
}
routes.js
import React from 'react';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux'
...
import store from '../store';
const history = syncHistoryWithStore(browserHistory, store)
let Routes =
<Router history={history}>
<Route path='/' component={MainContainer}>
<IndexRoute component={Home} />
<Route path='/sign_in' component={SigninForm} />
<Route path='dashboard' component={authenticateComponent(Dashboard)} />
</Route>
</Router>
export default Routes;
store.js
import { createStore, applyMiddleware, compose } from 'redux'
import thunkMiddleware from 'redux-thunk'
import createLogger from 'redux-logger'
import reducers from './reducers';
const createStoreWithMiddleware = compose(
applyMiddleware(
thunkMiddleware,
createLogger()
)
)
const store = createStore(reducers, createStoreWithMiddleware);
export default store;
AuthenticateComponent.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
export function authenticateComponent(Component) {
class AuthenticateComponent extends Component {
componentWillMount() {
this.checkAuth(this.props.isAuthenticated);
}
componentWillReceiveProps (nextProps) {
this.checkAuth(nextProps.isAuthenticated);
}
checkAuth (isAuthenticated) {
if (!isAuthenticated) {
let redirectAfterLogin = this.props.location.pathname;
this.props.dispatch(push(`/sign_in?next=${redirectAfterLogin}`));
}
}
render() {
return (
<div>
{this.props.isAuthenticated === true
? <Component {...this.props}/>
: null
}
</div>
)
}
}
const mapStateToProps = (state) => ({
token: state.auth.token,
isAuthenticated: state.auth.isAuthenticated
});
return connect(mapStateToProps)(AuthenticateComponent);
}
routing: routerReducer
을 내 결합 형 감속기에도 넣었습니다. 이 문제는 무엇이 될 수 있습니까?
routerMiddleware을 적용 할 필요가 밝혀졌습니다. 대시 보드에 jsx 오류가 있으면 탐색 할 수 없습니다. – vijayst
@vijayst 콘솔에서 발생한 오류가 없습니다. 그것이 내가 작동하지 않는 부분이 혼란스러워하는 이유입니다. 기본적으로 로그인 및 로그 아웃 후 모든 '디스패치 (push (url))'는 예상 주소로 리디렉션되지 않습니다. – spondbob
사용자가 인증되지 않은 경우 대시 보드 페이지가 다시 로그인 페이지로 리디렉션됩니까? 그렇다면 검사를 필요로하는 또 다른 장소입니다. – vijayst