升级后无法使react路由器工作

Question

我一直在致力于将我们的应用程序从React.js 0.13升级到15.4.2以及与之相关的依赖项。我可能很接近，但经过4天50个小时后，我终于到了终点，我最后的希望。

在升级过程中，react路由器被升级到4.0.0版，每个文档、教程和堆栈溢出问题都显示了如何编写路由器（所有这些都必须是正确的），但是，当我这样做时，它总是失败。要么说历史是必需的属性，要么当我通过示例添加它时，它仍然显示为未定义和错误。

这是我们的index.js和路由器。

有人能看出我哪里做得不对吗？谢谢

从“React”导入React；

// material ui
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Theme from './styles/theme.js';

import Header from './components/header.jsx';
import Home from './views/home.jsx';

import CaseController from 'controllers/caseController';
import LoginController from 'controllers/loginController';
import XController from 'controllers/xController';
import PredefinedSearchAssetCasesController from 'controllers/predefinedSearchAssetCasesController';
import PredefinedSearchCaseLabelsController from 'controllers/predefinedSearchCaseLabelsController';
import DeepSearchController from 'controllers/deepSearchController';
import NamesAndAddressController from 'controllers/namesAndAddressController';
import AccountListing from 'controllers/accountListingController';

import LoginStore from 'stores/loginStore';
import LoginActions from 'actions/loginActions';
import UtcStore from 'stores/utcStore';
import UtcActions from 'actions/utcActions';

import ErrorHandler from 'components/errorHandler';
import DialogMessageHandler from 'components/dialogMessageHandler';
import ConfirmationDialogHandler from 'components/confirmationDialogHandler';

// routing related
import { render } from 'react-dom';
import { Router, Route, DefaultRoute, Link, hashHistory, browserHistory } from 'react-router';

import versionNumber from 'raw-loader!../.version';

var App = React.createClass ({

  childContextTypes: {
    muiTheme: React.PropTypes.object
  },

  getChildContext() {
    return {
      muiTheme: MuiThemeProvider.get()
    };
  },

  componentWillMount() {
    //ThemeManager.setTheme(Theme);
    // TODO: consolidate into one request using /utc endpoint
    if (_.isEmpty(UtcStore.claimUtcList)) {
      UtcActions.getClaimUtcList();
    }
    if (_.isEmpty(UtcStore.assetUtcList)) {
      UtcActions.getAssetUtcList();
    }
    if (_.isEmpty(UtcStore.transferUtcList)) {
      UtcActions.getTransfers();
    }
  },

  componentDidMount() {
    LoginStore.addChangeListener(this.onLoginChange);
    if (!LoginStore.getLoginData()){
      this.transitionTo('login');
      return false;
    } else {
      LoginActions.checkToken();
    }
  },

  onLoginChange(){
    if (!LoginStore.getLoginData()){
      this.transitionTo('login');
    }
  },

  render() {

    console.log('VERSION: ', versionNumber);

    const styles = {
      root: {
        background: '#EEEEEE',
        paddingTop: 55 // see header.jsx menuHeight
      }
    };

    console.log('APP', this.context.router.getCurrentPath());

    let hideHeaderRoutes = ["/login"];
    let header = true;
    if (this.context.router.getCurrentPath().indexOf(hideHeaderRoutes) > -1){
      header = false;
      styles.root = undefined;
    }

    return (
      <MuiThemeProvider muiTheme={Theme}>
        <div style={styles.root}>
          {header ? <Header /> : {}}

          <ErrorHandler
            ref="errorHandler"
            />
          <DialogMessageHandler
            ref="dialogMessageHandler"
            />
          <ConfirmationDialogHandler
            ref="confirmDialogHandler"
            />
        </div>
      </MuiThemeProvider>
    );
  }
});

render((
  <Router history={browserHistory}>
    <Route component={App} path="/">
      <DefaultRoute component={Home}/>
      <Route path="home" component={Home} />
      <Route path="case" component={CaseController} />
      <Route path="case/:id/?:reverseToken?" component={CaseController} /> /* reverseToken is optional path variable for going back to last state when we go to case screen*/
      <Route path="login" component={LoginController} />
      <Route path="x" component={XController} />
      <Route path="x/?:xDate?/?:xFromTime?/?:xToTime?/?:id?" component={XController} />
      <Route path="namesAndAddress" component={NamesAndAddressController} />
      <Route path="reconciliation/?:reverseToken?" component={AccountListing} />
      <Route path="asset-cases/:predefinedQuery/:sortBy/?:reverseToken?" component={PredefinedSearchAssetCasesController} />
      <Route path="case-labels/:predefinedQuery/:sortBy/?:reverseToken?" component={PredefinedSearchCaseLabelsController} />
      <Route path="deep-search/:deepSearchQuery/:sortBy/openCasesOnly::openCasesOnly/assetCasesOnly::assetCasesOnly/searchType::searchType/?:reverseToken?" component={DeepSearchController} />
    </Route>
  </Router>
), document.body);

Answer 1

不幸的是，这个问题的答案是没有答案，即react-router 4.00需要react-router-config来执行静态路由，就像在早期版本中一样。所以问题上面所有的代码都是没有意义的。

Answer 2

看起来历史对象不再是react router的一部分。因此，您将从“react Router”导入{Router，Route，DefaultRoute，Link，hashHistory，browserHistory}实际上并没有导入hashHistory或browserHistory。

根据这些示例，获取历史对象的一个解决方案是安装history/createBrowserHistory包。

import { Router } from 'react-router'
import createBrowserHistory from 'history/createBrowserHistory'

const history = createBrowserHistory()

<Router history={history}>
  <App/>
</Router>