Question

我尝试迁移到react-router v4，我应该从哪里开始？对于大多数路径，我需要身份验证和redicert。我安装了最后的react-router-dom @ next和react-router @ next。现在当用户没有登录重定向到登录页面时，我也有登录回调，但有错误 WebSocket连接到＆＃39; ws：// localhost：9998 / sockjs-node / 472 / gnanejj3 / websocket＆＃39;失败：在建立连接之前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-router v2：v3感到满意，这将是您迁移的良好资源：

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

Answer 2

由于<Route path='/' render={({location}) => { if (!this.props.isLoggedIn) this.props.redirectToLoginPage() return ( ...不支持嵌套路由，因此此代码

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

可能会停止工作

我为组件创建了一些包装器。例如。

body {
    /*background: url('../images/background_img.jp');*/
    background-color: #FFFAFB;
    text-align: center;
    font-family: 'Lato', sans-serif;
    /* set margin and padding 0*/
    margin:0;
    padding:0;
}

迁移到react-router v4

2 个答案: