Bộ phản ứng không chuyển hướng trên máy chủ

Question

Tôi có thành phần thứ tự cao để kiểm tra xem người dùng có được xác thực hay không và sẽ không chuyển hướng đến một url khác.

Ứng dụng đẳng cấu của nó và điều này hoạt động ở phía máy khách nhưng nếu tôi tắt JS, máy chủ sẽ không chuyển hướng.

if (!this.props.authenticated) { 
    this.context.router.push('/'); 
} 

Tôi có thể nhấn tuyên bố này trên máy chủ và this.context.router đang trở lại nhưng không có gì xảy ra.

Full Component:

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 

export default function (ComposedComponent) { 
    class Authentication extends Component { 
     static contextTypes = { 
      router: React.PropTypes.object 
     } 

     static propTypes = { 
      authenticated: PropTypes.bool 
     } 

     componentWillMount() { 
      if (!this.props.authenticated) { 
       this.context.router.push('/'); 
      } 
     } 

     componentWillUpdate(nextProps) { 
      if (!nextProps.authenticated) { 
       this.context.router.push('/'); 
      } 
     } 

     render() { 
      return <ComposedComponent {...this.props} />; 
     } 
    } 

    function mapStateToProps(state) { 
     return { authenticated: state.auth.authenticated }; 
    } 

    return connect(mapStateToProps)(Authentication); 
} 

và thành phần này được đạt tới qua các tuyến đường file:

export default (
    <Route path='/' component={App}> 
     <IndexRoute component={Welcome} /> 
     <Route path='/feature' component={requireAuth(Feature)} /> 
     <Route path='/signin' component={Signin} /> 
     <Route path='/signout' component={Signout} /> 
     <Route path='/signup' component={Signup} /> 
    </Route> 
); 

Đây là máy chủ mã render:

import { RouterContext, match } from 'react-router'; 
import { Provider } from 'react-redux'; 
import { renderToString } from 'react-dom/server'; 
import React from 'react'; 
import reactCookie from 'react-cookie'; 

import configureStore from '../../shared/store'; 
import routes from '../../shared/routes'; 
import assets from '../../public/assets.json'; 

import { AUTH_USER } from '../../shared/actions/types'; 

export default function (req, res) { 
    match({ routes, location: req.url }, (error, redirectLocation, renderProps) => { 
     if (error) return res.status(500).send(error.message); 
     if (redirectLocation) return res.redirect(302, redirectLocation.pathname + redirectLocation.search); 
     if (!renderProps) return res.status(404).send('Page not found'); 

     const store = configureStore(); 

     // use cookies to retrieve token 
     const unplug = reactCookie.plugToRequest(req, res); // eslint-disable-line no-unused-vars 
     const token = reactCookie.load('token'); 

     // if we have a token, consider the user to be signed in 
     if (token) { 
      // we need to update application state 
      store.dispatch({ type: AUTH_USER }); 
     } 

     const content = renderToString(
      <Provider store={store}> 
       <RouterContext {...renderProps} /> 
      </Provider> 
     ); 

     const initialState = JSON.stringify(store.getState()); 

     return res.render('index', { content, assets, initialState }); 
    }); 
} 

Answer 1

Bạn có thể chia sẻ máy chủ của bạn dựng mã? Nó có thể cần phải trông giống như https://github.com/ReactTraining/react-router/blob/master/docs/guides/ServerRendering.md, nơi bạn đang kiểm tra cờ redirectLocation. Điều đó redirectLocation có thể được trả lại bằng cách sử dụng một móc onEnter thay vì một thành phần wrapper. Móc onEnter được ghi thành here.

Cập nhật từ nhận xét bên dưới: Ok để mã máy chủ của bạn kiểm tra chính xác redirectLocation, nhưng mã định tuyến cần phải sử dụng móc onEnter để đặt chính xác redirectLocation. Cũng giống như vậy:

Ok, vì vậy bạn một cách chính xác vinh danh redirectLocation trong mã máy chủ, nhưng redirectLocation chỉ được phổ biến sử dụng một móc OnEnter, như vậy:

const userIsInATeam = (nextState, replace) => { 
    if (!isAuth) { 
    replace('/') 
    } 
} 

<Route path="https://stackoverflow.com/users/:userId/teams" onEnter={userIsInATeam} /> 

Tôi nghĩ nextState nên có auth chống đỡ bạn đang tìm kiếm trong nó để kiểm tra auth.