遷移到react-router v4

Question

我嘗試遷移到react-router v4，我應該從哪裏啓動？對於大多數路徑我需要認證和redicert。我安裝了最後一個react-router-dom @ next和react-router @ next。現在當用戶沒有登錄重定向到登錄頁面， 也有登錄回調，但有一個錯誤 WebSocket連接到'ws：// localhost：9998/sockjs-node/472/gnanejj3/websocket'失敗：WebSocket是在連接建立之前關閉。

的application.js

 import React, {Component} from 'react' 
import {connect} from 'react-redux' 
import {IntlProvider} from 'react-intl' 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider' 
import getMuiTheme from 'material-ui/styles/getMuiTheme' 

import theme from './theme' 

import * as AuthActions from './actions/auth' 
import Routes from './routes' 

export class Application extends Component { 
    static propTypes = { 
     locale: React.PropTypes.string.isRequired, 
     messages: React.PropTypes.objectOf(React.PropTypes.string.isRequired).isRequired, 
     login: React.PropTypes.func.isRequired, 
     redirectToLoginPage: React.PropTypes.func.isRequired, 
     isLoggedIn: React.PropTypes.bool.isRequired, 
    }; 

    render =() => 
     <IntlProvider locale={this.props.locale} messages={this.props.messages}> 
      <MuiThemeProvider muiTheme={getMuiTheme(theme)}> 
       <Routes /> 
      </MuiThemeProvider> 
     </IntlProvider>; 
} 

export default Application 

routes.js：

import React from 'react' 
import {connect} from 'react-redux' 
import {BrowserRouter, Route, Link ,Redirect, withRouter, Switch} from 'react-router-dom' 

import Root from './components/root' 
import Home from './components/homePage' 
import Devices from './components/devices' 
import Users from './components/users' 
import AddOrEditUser from './components/users/addOrEdit' 
import Plans from './components/plans' 
import ServerSettings from './components/settings' 
import About from './components/aboutPage' 
import Patients from './components/patients' 
import AddOrEditPatient from './components/patients/addOrEdit' 
import Commissioning from './components/commissioning' 
import * as AuthActions from './actions/auth' 
import redirectToLoginPage from './api/auth' 

const Routes = ({isLoggedIn, redirectToLoginPage, login}) => 
    <BrowserRouter> 
     <Switch> 
      <Route path='/' render={({location}) => { 
       if (!isLoggedIn) 
        redirectToLoginPage() 
       return (
        <Root> 
         <Switch> 
          <Route path='/home' component={Home} /> 
          <Route path='/devices' component={Devices} /> 
          <Route path='/users' component={Users} /> 
          <Route path='/users/add' component={AddOrEditUser}/> 
          <Route path='/users/edit/:personId' component={AddOrEditUser}/> 

          <Patients path='/patients' render={() => 
            <Switch> 
             <Route path='/add' component={AddOrEditPatient} /> 
             <Route path='/edit/:personId' component={AddOrEditPatient} /> 
            </Switch> 
           } 
          /> 

          <Route path='/plans' component={Plans} /> 
          <Route path='/commissioning' component={Commissioning} /> 
          <Route path='/server-settings' component={ServerSettings} /> 
          <Route path='/about' component={About} /> 
         </Switch> 
        </Root>) 
      }} 
      /> 
      <Route path='/login-callback' render={() => { 
       if (isLoggedIn) 
        login() 
       return <Root /> 
      }} 
      /> 
     </Switch> 
    </BrowserRouter> 

Routes.propTypes = { 
    // authenticate: React.PropTypes.func.isRequired, 
    // processLoginCallback: React.PropTypes.func.isRequired, 
    login: React.PropTypes.func.isRequired, 
    redirectToLoginPage: React.PropTypes.func.isRequired, 
    isLoggedIn: React.PropTypes.bool.isRequired, 
} 

export const mapDispatchToProps = dispatch => ({ 
    login:() => dispatch(AuthActions.login()), 
    redirectToLoginPage:() => dispatch(AuthActions.redirectToLoginPage()), 
}) 

export const mapStateToProps = state => ({ 
    isLoggedIn: state.auth.isLoggedIn, 
    locale: state.intl.locale, 
    messages: state.intl.messages, 
}) 

export default connect(mapStateToProps, mapDispatchToProps)(Routes) 

Answer 1

由於v4不支持嵌套的路線，這個代碼

<Route path='/' render={({location}) => { 
     if (!this.props.isLoggedIn) 
      this.props.redirectToLoginPage() 
     return (... 

可能會停止WO rking

我通過爲組件創建一些包裝來解決問題。

const enforceLoginValidation = (children) => { 
    const fn = ({ match }) => { 
    if (!this.props.isLoggedIn) { 
     this.props.redirectToLoginPage() 
     return 
    } 
    // to pass react-router's match to the children 
    const extendedChild = React.cloneElement(children, { match }); 
    return extendedChild; 
    }; 
    return fn; 
}; 

... 

const HomePage = enforceLoginValidation(
    <Home /> 
); 

.... 
<Route path='/home' component={HomePage} /> 

Answer 2

這是一個複雜的問題，StackOverflow響應框太過於限制。我寫了一篇冗長的遷移指南。如果您熟悉反應路由器V2：V3，這將是您的遷移一個很好的資源：

https://medium.com/@francoisz/react-router-v4-unofficial-migration-guide-5a370b8905a