bộ định tuyến phản ứng - Chuyển hướng sau khi đăng nhập

Question

Bạn có thể vui lòng giúp tôi hiểu cơ chế chuyển hướng mà tôi có thể sử dụng với phiên bản mới nhất của bộ định tuyến phản ứng (v1.1.0). Tôi muốn chuyển hướng đến một số url tùy thuộc vào sự thành công hoặc thất bại của thông tin đăng nhập người dùng. Tôi đã cố gắng thực hiện các bước sau Lần đầu tiên tạo lịch sử bằng.

let history = createBrowserHistory(); 

sau đó đã cố gắng để đẩy tình trạng sử dụng

history.pushState(null, 'abc') 

Không có gì đang xảy ra. Bạn có thể vui lòng cho tôi biết cách thực hiện chuyển tiếp chính xác hay không. Từ tài liệu tôi đã hiểu rằng API transitionTo() không có trong các phiên bản mới nhất. Nó sẽ tuyệt vời Nếu bạn có thể chỉ ra một ví dụ làm việc đơn giản.

Xin cảm ơn trước.

Answer 1

Bạn có thể đăng ký "móc" trên các tuyến đường của mình được kích hoạt khi bạn vào và rời khỏi các tuyến đường. Xem tài liệu cho onEnter and onLeave hooks. .

Ngoài ra còn có một example of requiring auth trên một tuyến đường và chuyển hướng đến một con đường khác nếu người dùng không đăng nhập

Dưới đây là một đoạn trích từ yêu cầu auth ví dụ trong app.js:

function requireAuth(nextState, replaceState) { 
    if (!auth.loggedIn()) 
    replaceState({ nextPathname: nextState.location.pathname }, '/login') 
} 

// And from the route configuration, use the requireAuth function in onEnter... 
<Router history={history}> 
    <Route path="/" component={App}> 
    <Route path="login" component={Login} /> 
    <Route path="logout" component={Logout} /> 
    <Route path="about" component={About} /> 
    <Route path="dashboard" component={Dashboard} onEnter={requireAuth} /> 
    </Route> 
</Router> 

Các Các đối số nextState và replaceState là các đối tượng từ rackt/history và được tiêm vào phương thức bạn chuyển vào onEnter.

Answer 2

câu trả lời của @terranmoccasin là chính xác. Tuy nhiên có một nhu cầu chung rất ít ví dụ địa chỉ.

Giả sử bạn cần bảo mật một số tuyến đường (dashboard1, dashboard2, ...). Làm thế nào để bạn chuyển hướng trở lại trang gốc khi bạn đăng nhập thành công? Nói cách khác, bạn làm gì với {nextPathname: nextState.location.pathname}?

Đây là những gì tôi làm trong ./containers/LoginContainer.js:

import { push } from 'react-router-redux'; 
const mapStateToProps = (state) => ({ 
    nextPathname: state.routing.locationBeforeTransitions.state.nextPathname, 
}); 
const mapDispatchToProps = (dispatch) => ({ 
    changeLocationOnSignIn: (nextPathname) => { 
    dispatch(push(nextPathname)); 
    }, 
}); 

và trong ./components/Login.js

componentWillReceiveProps(nextProps) { 
    // user signed in or signed up, assuming redux. you may use this elsewhere. 
    if (nextProps.user.status === 'authenticated' && nextProps.user.user && 
    !nextProps.user.error) { 
     this.props.changeLocationOnSignIn(this.props.nextPathname); 
    } 

React-router 2.4.0 (tháng 4 năm 2016) giới thiệu withRouter mà tạo ra một HOC. Tuy nhiên nó kết thúc tốt đẹp React.createClass, không phải là một lớp JS. Tôi đã không thể làm cho nó làm việc với hình thức redux, vv Bên cạnh đó tôi nghĩ rằng mã trên là dễ hiểu hơn.

Answer 3

Vì @JohnSz đề cập đến tôi cũng gặp sự cố khi sử dụng withRouter. Thay vào đó tôi đã làm nó theo hướng dẫn ở đây: https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#programmatic-navigation

const RouteComponent = React.createClass({ 
    contextTypes: { 
    router: React.PropTypes.object.isRequired 
    }, 
    someHandler() { 
    this.context.router.push(...) 
    } 
}) 

Về cơ bản:

1. Xác định contextType
2. Sử dụng this.context.router.push (...)

Chúc mừng.

Answer 4

Muốn cập nhật chuỗi này vì tôi đã dành nhiều thời gian để tìm hiểu về điều này. Trong React Router 2.0.x, replaceState không được dùng để thay thế. Xem ở đây để biết chi tiết: https://github.com/ReactTraining/react-router/blob/v2.0.0/upgrade-guides/v2.0.0.md#link-to-onenter-and-isactive-use-location-descriptors

Cách đúng để làm điều này sẽ là một cái gì đó như thế này:

function requireAuth(nextState, replace) { 
    if (!userExists()) { 
    replace({ 
     pathname: '/signin', 
     state: { nextPathname: nextState.location.pathname } 
    }) 
    } 
} 

export const renderRoutes =() => (
    <Router history={browserHistory}> 
     <Route path="protectedRoute" component={Protected} onEnter={requireAuth} /> 
     <Route path="signin" component={SignIn} /> 
    </Route> 
    </Router> 
); 

Sau đó, trong phần đăng nhập, bạn có thể chuyển hướng sau khi một dấu hiệu thành công trong việc như thế này:

signInFunction({params}, (err, res) => { 
    // Now in the sign in callback 
    if (err) 
    alert("Please try again") 
    else { 
    const location = this.props.location 
    if (location.state && location.state.nextPathname) { 
     browserHistory.push(location.state.nextPathname) 
    } else { 
     browserHistory.push('/') 
    } 
    } 
}) 

Answer 5

Phản ứng v4.2 Router

Tôi đang sử dụng Phản ứng-16,2 & Phản ứng-router-4,2

và tôi nhận được giải pháp của thành viên này this.props.history.push("/");

mã làm việc của tôi:

.then(response => response.json()) 
     .then(data => { 
      if(data.status == 200){ 
       this.props.history.push("/"); 
       console.log('Successfully Login'); 
      } 
     }) 

Tôi đang theo dõi tài liệu này redirect-on-login-and-logout