迁移到react路由器v4

Question

我试图迁移到反应性路由器v4，我应该从哪里开始呢？对于大多数路径，我需要身份验证和redicert。我安装了最后一次反应-路由器-多玛@下一步和反应-路由器@下一步。现在，当用户不是登录重定向到登录页面时，我也有登录-回调，但是'ws://localhost:9998/sockjs-node/472/gnanejj3/websocket‘的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

这是一个复杂的问题，StackOverflow响应框对这个问题的限制太大了。我写了一个冗长的迁移指南。如果您对react路由器v2:v3感到满意，这将是您迁移的一个很好的资源：

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

Answer 2

由于v4不支持嵌套路由，所以以下代码

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

可能会停止工作

我为组件.e.g创建了一些包装器。

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} />