feat: react-router升级3->5 #145

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

Majesty-L wants to merge 1 commit into duxianwei520:master from Majesty-L:router-update4

app/client.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -2,16 +2,14 @@ @@
     import React from 'react'
     import ReactDOM from 'react-dom'
     import { Provider } from 'react-redux'
-    import { hot } from 'react-hot-loader/root'
     import '@config'
     import Routes from '@configs/router.config'
     import configure from '@middleware/configureStore'
-    const HotRoutes = hot(Routes)
     const store = configure({ })
     ReactDOM.render(
       <Provider store={store}>
-        <HotRoutes />
+        <Routes />
       </Provider>,
       document.getElementById('root'),
     )

app/configs/ajax.js

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,6 +1,6 @@
  
    import axios from 'axios'

    import { hashHistory } from 'react-router'

    import history from '@middleware/history'

    import { timeout, baseURL } from '@config'

    import { message } from 'antd'

    import { parseQueryString } from './common'

    @@ -12,7 +12,7 @@ let flag = true
  
    function logOut(text) {

      if (flag) {

        message.warning(text || '用户登录过期或从其他浏览器登录')

        hashHistory.replace('/login')

        history.replace('/login')

        flag = false

        setTimeout(() => flag = true, 0)

      }

app/configs/common.js

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,5 +1,5 @@
  
    import { hashHistory } from 'react-router'

    import history from '@middleware/history'

    import { message } from 'antd'

    import { loginByTicket, staff, login as loginApi, getBtns } from '@apis/common'

    @@ -27,7 +27,7 @@ const _fetchLoginByTicket = async ticket => new Promise((resolve) => {
  
        if (obj.ticket || obj.mode) {

          message.info('登录过期或服务不可用')

        } else {

          hashHistory.replace('/login')

          history.replace('/login')

        }

      })

    })

    @@ -56,23 +56,25 @@ const _fetchNav = pathname => new Promise((resolve) => {
  
        const { list } = response.data

        if (list.length === 0) {

          message.info('该账户没有任何菜单权限，请联系管理员')

          hashHistory.replace('/login')

          history.replace('/login')

          // this.setState({ loading: false })

          return

        }

        sessionStorage.setItem('menu', JSON.stringify(list))

        // TODO:添加完菜单权限后，需要增加以下代码

        // if (pathname !== '/' && !isHasCurrentMenu(list, pathname)) {

        //   if (process.env.NODE_ENV === 'production') {

        //     hashHistory.replace('/')

        //     history.replace('/')

        //   }

        // }

        resolve()

      })

    })

    /* 不管是否含有ticket参数都会在顶层组件中调用 */

    export const validateTickit = async function validateTickit({ query, pathname }, callback) {

    export const validateTickit = async function validateTickit(location, callback) {

      const { search, pathname } = location

      const query = new URLSearchParams(search)

      const { ticket } = query

      if (ticket) {

        const loginInfo = await _fetchLoginByTicket(ticket)

    @@ -152,17 +154,15 @@ export const fetchBtns = (component, cb) => {
  
    }

    // 进入路由的判断

    export const isLogin = (nextState, replaceState) => {

      if (nextState.location.query && nextState.location.query.ticket) { // 如果url自带ticket

    export const isLogin = ({search}) => {

      const query = new URLSearchParams(search)

      if (query.get('ticket')) { // 如果url自带ticket

        sessionStorage.setItem('token', 'ticket')

      }

      if (nextState.location.query && nextState.location.query.key) { // 如果url自带key

      if (query.get('key')) { // 如果url自带key

        sessionStorage.setItem('token', 'key')

      }

      const token = sessionStorage.getItem('token')

      if (!token) { // 没有token，那就返回首页

        replaceState('/login')

      }

      return !!sessionStorage.getItem('token');

    }

app/configs/router.config.js

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,29 +1,67 @@
  
    import React from 'react'

    import { Router, Route, IndexRoute, hashHistory/* , Redirect */ } from 'react-router'

    import { HashRouter, Route, Switch, Redirect } from 'react-router-dom'

    import { isLogin } from '@configs/common'

    import { set } from '@config'

    import * as base from '@pages/base' // 基础

    import * as sysSet from '@pages/set' // 设置中心-系统设置

    import * as menu from '@pages/menu' // 菜单

    // export default () => (

    //   <Router history={hashHistory}>

    //     <Route path="/" component={base.app} onEnter={isLogin}>

    //       <IndexRoute component={base.example} />

    //       <Route path="/desk$/index" component={base.example} />

    //       {/* <Route path="/socketReceive" component={base.socketReceive} /> */}

    //       {/** *菜单 开始 */}

    //       <Route path="/echarts" component={menu.echarts} />

    //       <Route path="/editor" component={menu.editor} />

    //       {/** *菜单 结束 */}

    //       {/** *系统设置 开始 */}

    //       <Route path={`/${set}/userManage`} component={sysSet.userManage} />

    //       <Route path={`/${set}/roleManage`} component={sysSet.roleManage} />

    //       <Route path={`/${set}/moduleManage`} component={sysSet.moduleManage} />

    //       {/** *系统设置 结束 */}

    //     </Route>

    //     <Route path="/login" component={base.login} />

    //     <Route path="*" component={base.notfound} />

    //   </Router>

    // )

    const PrivateRoute = ({ component: Component, render, ...rest }) => (

      <Route

        {...rest}

        render={(props) => {

          if (isLogin(props.location || {})) {

            return render ? render(props) : <Component {...props} />

          }

          return <Redirect to="/login" />

        }

        }

      />)

    export default () => (

      <Router history={hashHistory}>

        <Route path="/" component={base.app} onEnter={isLogin}>

          <IndexRoute component={base.example} />

          <Route path="/desk$/index" component={base.example} />

          {/* <Route path="/socketReceive" component={base.socketReceive} /> */}

          {/** *菜单 开始 */}

          <Route path="/echarts" component={menu.echarts} />

          <Route path="/editor" component={menu.editor} />

          {/** *菜单 结束 */}

          {/** *系统设置 开始 */}

          <Route path={`/${set}/userManage`} component={sysSet.userManage} />

          <Route path={`/${set}/roleManage`} component={sysSet.roleManage} />

          <Route path={`/${set}/moduleManage`} component={sysSet.moduleManage} />

          {/** *系统设置 结束 */}

        </Route>

        <Route path="/login" component={base.login} />

        <Route path="*" component={base.notfound} />

      </Router>

    )

      <HashRouter>

        <Switch>

          {/* 登录页 */}

          <Route path="/login" component={base.login} />

          {/* 主应用 - 包含侧边栏的所有页面 */}

          <PrivateRoute path="/"

            render={props => (

              <base.app {...props}>

                <Switch>

                  <Route exact path="/" render={() => <Redirect to="/desk$/index" />} />

                  <Route path="/desk$/index" component={base.example} />

                  <Route path="/echarts" component={menu.echarts} />

                  <Route path="/editor" component={menu.editor} />

                  <Route path={`/${set}/userManage`} component={sysSet.userManage} />

                  <Route path={`/${set}/roleManage`} component={sysSet.roleManage} />

                  <Route path={`/${set}/moduleManage`} component={sysSet.moduleManage} />

                  <Route path="*" component={base.notfound} />

                </Switch>

              </base.app>

            )}

          />

        </Switch>

      </HashRouter>

    );

app/middleware/history.js

-Original file line number
+Diff line change
@@ -1,6 +1,4 @@
-    import { useRouterHistory } from 'react-router'
-    import createHashHistory from 'history/lib/createHashHistory'
+    import { createHashHistory } from 'history';
-    // export default useRouterHistory(createHashHistory)()
-    const history = useRouterHistory(createHashHistory)({})
-    export default history
+    const history = createHashHistory();
+    export default history;

app/middleware/index.js

-Original file line number
+Diff line change
@@ -1,5 +1,5 @@
-    import { routerMiddleware } from 'react-router-redux'
+    import { routerMiddleware } from 'connected-react-router'
     import logger from './logger'
     import history from './history'
     // import router from './router'
@@ Expand Down @@

app/middleware/router.js

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,4 +1,4 @@
  
    import { browserHistory } from 'react-router'

    import { routerMiddleware } from 'react-router-redux'

    import { routerMiddleware } from 'connected-react-router'

    import history from './history'

    export default routerMiddleware(browserHistory)

    export default routerMiddleware(history)

app/pages/base/app.js

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -2,7 +2,7 @@
  
    import React, { Component } from 'react'

    // import { bindActionCreators } from 'redux'

    import { connect } from 'react-redux'

    import { hashHistory } from 'react-router'

    import history from '@middleware/history'

    import { message, LocaleProvider } from 'antd'

    import { validateTickit/* , parseQueryString */ } from '@configs/common'

    import { loginByKey } from '@apis/common'

    @@ -57,17 +57,18 @@ export default class App extends Component {
  
            menuStyle: true,

          })

        }

        const { query } = this.props.location

        if (query.ticket) { // 如果是url路径带ticket的话，那么在当前页面做登录的初始化

        const query = new URLSearchParams(this.props.location.search)

        if (query.get('ticket')) { // 如果是url路径带ticket的话，那么在当前页面做登录的初始化

          validateTickit(this.props.location, (res) => {

            this.setState({

              idRenderChild: true,

            })

          })

        } else if (query.key) {

        } else if (query.get('key')) {

          // const params = parseQueryString(window.location.href)

          loginByKey({ }, (res) => {

            sessionStorage.setItem('key', query.key)

            sessionStorage.setItem('key', query.get('key'))

            this.setState({

              idRenderChild: true,

            })

    @@ -86,7 +87,7 @@ export default class App extends Component {
  
          })

        }

        if (query.mode === 'iframe' || query.key) {

        if (query.get('mode') === 'iframe' || query.get('key')) {

          this.setState({

            isIframe: true,

          })

    @@ -169,14 +170,14 @@ export default class App extends Component {
  
            }

          })

          if (hasIndex) {

            hashHistory.push(item.children[0].resKey)

            history.push(item.children[0].resKey)

          } else {

            hashHistory.push('mission$/my$')

            history.push('mission$/my$')

          }

        } else if (item.children[0] && item.children[0] && item.children[0].children && item.children[0].children[0]) {

          hashHistory.push(item.children[0].children[0].resKey)

          history.push(item.children[0].children[0].resKey)

        } else {

          hashHistory.push(item.children[0].resKey)

          history.push(item.children[0].resKey)

        }

      }

app/pages/base/app/header.js

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,7 +1,7 @@
  
    import React, { Component } from 'react'

    import { connect } from 'react-redux'

    import { hashHistory } from 'react-router'

    import history from '@middleware/history'

    import { Menu, Button, Modal, message, Icon, Row, Col } from 'antd'

    import { brandName } from '@config'

    import { logout } from '@apis/common'

    @@ -47,7 +47,7 @@ export default class Header extends Component {
  
              if (result.status === 1) {

                sessionStorage.clear()

                config.staff = {}

                hashHistory.push('/login')

                history.push('/login')

              } else {

                message.warning(result.msg)

              }

    @@ -84,16 +84,16 @@ export default class Header extends Component {
  
      logoClick = () => {

        // const nav = JSON.parse(sessionStorage.getItem('gMenuList'))

        // if (nav[0] && nav[0].children && nav[0].children[0].children && nav[0].children[0].children[0] && nav[0].children[0].children[0].resKey) {

        //   hashHistory.push(nav[0].children[0].children[0].resKey)

        //   history.push(nav[0].children[0].children[0].resKey)

        //   sessionStorage.setItem('topMenuReskey', nav[0].resKey)

        // }

        // if (nav[0] && nav[0].children && nav[0].children[0].resKey) {

        //   hashHistory.push(nav[0].children[0].resKey)

        //   history.push(nav[0].children[0].resKey)

        // } else {

        //   hashHistory.push('/')

        //   history.push('/')

        // }

        // console.log(nav)

        // hashHistory.push()

        // history.push()

      }

      render() {

app/pages/base/app/leftNav.js

-Original file line number
+Diff line change
@@ -1,7 +1,6 @@
     import React, { Component } from 'react'
     import { connect } from 'react-redux'
-    import { hashHistory/* , Link  */ } from 'react-router'
-    // import { routerActions } from 'react-router-redux'
+    import history from '@middleware/history'
     import { Menu, Spin } from 'antd'
     // import { updateTabList } from '@actions/tabList'
     import { clearGformCache2 } from '@actions/common'
@@ Expand Down Expand Up / @@ -89,7 +88,7 @@ export default class LeftNav extends Component { @@
       // 菜单点击事件
       _handleClick = (e) => {
         this.props.dispatch(clearGformCache2({}))
-        hashHistory.push(`/${e.key}`)
+        history.push(`/${e.key}`)
       }
       onOpenChange = (openKeys) => {
@@ Expand Down @@

app/pages/base/app/tabList.js

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,7 +1,7 @@
  
    import React, { Component } from 'react'

    import { bindActionCreators } from 'redux'

    import { connect } from 'react-redux'

    import { routerActions } from 'react-router-redux'

    import { push } from 'connected-react-router'

    import { is } from 'immutable'

    import { Tabs } from 'antd'

    import { updateTabChecked, deleteTabFromList } from '@actions/tabList'

    @@ -11,7 +11,7 @@ const { TabPane } = Tabs
  
    @connect(

      (state, props) => ({ tabList: state.tabListResult }),

      dispatch => ({

        actions: bindActionCreators(routerActions, dispatch),

        actions: bindActionCreators({ push }, dispatch),

        dispatch: dispatch,

      }),

    )

app/pages/base/login.js

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,7 +1,7 @@
  
    import React, { Component } from 'react'

    import { connect } from 'react-redux'

    import { hashHistory/* , Link */ } from 'react-router'

    import history from '@middleware/history'

    import { Spin, Form, Icon, Input, Button, Row, Col, message } from 'antd'

    import { regExpConfig } from '@reg'

    import { brandName } from '@config'

    @@ -91,7 +91,7 @@ export default class Login extends Component {
  
                  staff({ usercode: query.username }, (resp) => {

                    sessionStorage.setItem('userinfo', JSON.stringify(resp.data))

                    hashHistory.push('/')

                    history.push('/')

                  }, (r) => {

                    message.warning(r.msg)

                    this.setState({

app/pages/base/notfound.js

-Original file line number
+Diff line change
@@ -1,5 +1,6 @@
     import React, { Component } from 'react'
-    import { Link, hashHistory } from 'react-router'
+    import { Link } from 'react-router-dom'
+    import history from '@middleware/history'
     import { Progress, Button } from 'antd'
     // 声明组件  并对外输出
@@ Expand All / @@ -26,7 +27,7 @@ export default class notfound extends Component { @@
             <div className="link ptbig">
               <p className="mbbig"><Link to="/">跳转至首页</Link></p>
               <p className="mbbig"><Link to="/login">跳转至登陆页</Link></p>
-              <Button type="primary" onClick={() => hashHistory.goBack()}>返回上一页</Button>
+              <Button type="primary" onClick={() => history.goBack()}>返回上一页</Button>
             </div>
           </div>
         )
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: react-router升级3->5 #145

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

feat: react-router升级3->5 #145

Are you sure you want to change the base?

Uh oh!

feat: react-router升级3->5 #145

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!