migrieren zum Reagieren-Router v4

Question

Ich versuche, auf den Reaktiv-Router v4 zu migrieren, wo soll ich anfangen? Für die meisten Pfade benötige ich Authentifizierung und Redicert. Ich habe letzten react-router-dom @ next und react-router @ next installiert. Jetzt, wenn Benutzer nicht Login Redirect Login-Seite, auch ich habe Login-Callback, aber habe einen Fehler WebSocket-Verbindung zu 'ws: // localhost: 9998/sockjs-Knoten/472/gnanejj3/websocket' fehlgeschlagen: WebSocket ist geschlossen, bevor die Verbindung hergestellt ist.

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

Da v4 nicht verschachtelte Route nicht unterstützt, diesen Code

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

wahrscheinlich wo aufhören rking

Ich komme herum, indem ich einige Wrapper für die Komponenten z.

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

Das ist eine komplexe Frage, für die eine StackOverflow-Antwortbox zu einschränkend ist. Ich habe einen ausführlichen Migrationsleitfaden geschrieben. Wenn Sie reagieren mit-Router v2 bequem sind: v3, wird dies eine gute Ressource für die Migration:

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