3

我正在尝试在我的应用程序中将 react-router 更新到 v2.6 并将 react-router-relay 更新到 v0.7，但我正在努力遵循更改日志来解决所有重大更改。我想我解决了所有的变化，但我仍然无法让它发挥作用。

警告：[react-router] 位置“/”不匹配任何路由

这是我为解决这些更改所做的分步指南。首先我更新了 npm 模块。

我以前的 package.json 一切正常：

"dependencies": {
    "babel-polyfill": "^6.9.1",
    "babel-runtime": "^6.9.2",
    "graphiql": "0.7.3",
    "graphql": "^0.6.2",
    "history": "1.13.1",
    "isomorphic-fetch": "^2.1.1",
    "react": "^15.2.1",
    "react-addons-shallow-compare": "^15.2.1",
    "react-dom": "^15.2.1",
    "react-loader": "^2.0.0",
    "react-relay": "^0.9.2",
    "react-router": "1.0.0-rc3",
    "react-router-relay": "^0.7.0",
    "superagent": "^1.2.0"
  },
  "devDependencies": {
    "babel-core": "^6.11.4",
    "babel-eslint": "^6.1.2",
    "babel-jest": "^13.2.2",
    "babel-loader": "^6.2.4",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-preset-stage-1": "^6.5.0",
    "babel-preset-stage-2": "^6.11.0",
    "babel-relay-plugin": "^0.9.2",
    "jest-cli": "^12.1.1",
    "react-addons-test-utils": "^15.2.1",
    "webpack": "^1.13.1"
  },

我的新 package.json 出现错误：

"dependencies": {
    "babel-polyfill": "^6.9.1",
    "babel-runtime": "^6.9.2",
    "graphiql": "0.7.3",
    "graphql": "^0.6.2",
    "isomorphic-fetch": "^2.1.1",
    "react": "^15.2.1",
    "react-addons-shallow-compare": "^15.2.1",
    "react-dom": "^15.2.1",
    "react-loader": "^2.0.0",
    "react-relay": "^0.9.2",
    "react-router": "^2.6.0",
    "react-router-relay": "^0.13.3",
    "superagent": "^1.2.0"
  },
  "devDependencies": {
    "babel-core": "^6.11.4",
    "babel-eslint": "^6.1.2",
    "babel-jest": "^14.0.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-preset-stage-1": "^6.5.0",
    "babel-preset-stage-2": "^6.11.0",
    "babel-relay-plugin": "^0.9.2",
    "jest-cli": "^12.1.1",
    "react-addons-test-utils": "^15.2.1",
    "webpack": "^1.13.1"
  },

我删除了历史模块，因为它现在是 react-router 的直接依赖项。安装最新模块后，我重新加载了页面并收到以下错误：

错误一：

警告：[react-router] 看来您已向 提供了一个已弃用的历史对象<Router/>，请使用 React Router 提供的历史记录import { browserHistory } from 'react-router'或import { hashHistory } from 'react-router'。如果您正在使用自定义历史记录，请使用创建它，有关详细信息useRouterHistory，请参阅https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#using-history-with-router .

错误2：

警告：上下文类型失败：relay提供给 的道具/上下文无效Relay(App)，应undefined为符合RelayEnvironment接口的对象。

in Relay(App) (created by RouterContext)
in RouterContext (created by Router)
in Router

错误 3：

警告：上下文类型失败：route未在 中指定所需的上下文Relay(App)。

in Relay(App) (created by RouterContext)
in RouterContext (created by Router)
in Router

错误 4：

Uncaught Invariant Violation: RelayContainer:Relay(App)使用无效的 Relay context 渲染undefined。确保relayReact 上下文中的属性符合RelayEnvironment接口。

第一个错误提供了一个方便的链接到 react-router 的升级指南，所以我按照它并相应地更新了我的 app.js 文件。

在我进行更改之前，它看起来是这样的：

import babelPolyfill from 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactRouterRelay from 'react-router-relay';
import Loader from 'react-loader';
import { Router, Route } from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';

import WelcomeQueries from './queries/WelcomeQueries';
import AppQueries from './queries/AppQueries';
import LandingQueries from './queries/LandingQueries';

import App from './components/app';
import Landing from './components/landing';

import './relay';

const renderProps = {
  renderLoading: () => <Loader />,
};

ReactDOM.render((
  <Router history={createBrowserHistory()} createElement={ReactRouterRelay.createElement}>
    <Route component={App} queries={AppQueries} {...renderProps}>
      <Route path="/myapp" component={Landing} queries={LandingQueries} {...renderProps} />
    </Route>
    <Route path="/myapp/tracks" component={Welcome} queries={WelcomeQueries} {...renderProps}/>
  </Router>
), document.getElementById('myapp-body'));

尝试 1

使用 2.x 的更新指南，我将 app.js 文件更改为使用如下自定义历史记录：

import babelPolyfill from 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactRouterRelay from 'react-router-relay';
import Loader from 'react-loader';

import { Router, Route, useRouterHistory } from 'react-router'
import { createHashHistory } from 'history'

import WelcomeQueries from './queries/WelcomeQueries';
import AppQueries from './queries/AppQueries';
import LandingQueries from './queries/LandingQueries';

import App from './components/app';
import Landing from './components/landing';

import './relay';

const renderProps = {
  renderLoading: () => <Loader />,
};

const appHistory = useRouterHistory(createHashHistory)({ queryKey: false })

ReactDOM.render((
  <Router history={appHistory} createElement={ReactRouterRelay.createElement}>
    <Route component={App} queries={AppQueries} {...renderProps}>
      <Route path="/myapp" component={Landing} queries={LandingQueries} {...renderProps} />
    </Route>
    <Route path="/myapp/tracks" component={Welcome} queries={WelcomeQueries} {...renderProps}/>
  </Router>
), document.getElementById('myapp-body'));

然后，这在浏览器中给了我以下错误：

错误 5

警告：[react-router] 位置“/”不匹配任何路由

我相信这就是我想要的解决方案。但是我不确定，所以我也尝试了浏览器（HTML5 pushState）历史方式并尝试了以下更改：

尝试 2

import babelPolyfill from 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactRouterRelay from 'react-router-relay';
import Loader from 'react-loader';

import { Router, Route, browserHistory } from 'react-router'

import WelcomeQueries from './queries/WelcomeQueries';
import AppQueries from './queries/AppQueries';
import LandingQueries from './queries/LandingQueries';

import App from './components/app';
import Landing from './components/landing';

import './relay';

const renderProps = {
  renderLoading: () => <Loader />,
};

const appHistory = useRouterHistory(createHashHistory)({ queryKey: false })

ReactDOM.render((
  <Router history={browserHistory} createElement={ReactRouterRelay.createElement}>
    <Route component={App} queries={AppQueries} {...renderProps}>
      <Route path="/myapp" component={Landing} queries={LandingQueries} {...renderProps} />
    </Route>
    <Route path="/myapp/tracks" component={Welcome} queries={WelcomeQueries} {...renderProps}/>
  </Router>
), document.getElementById('myapp-body'));

加载此内容时，我得到错误 2、3 和 4。我认为尝试 1 是正确的方法，但我不知道这个错误意味着什么，用谷歌搜索它，给了我很多答案（1、2，它把我链接到3甚至4与 IndexRoute），我尝试过，但没有一个答案有效。

我的 App.js 文件如下所示，仅供参考：

import React from 'react';
import Relay from 'react-relay';
import Top from './top';

export class App extends React.Component {
  render() {
    return (
      <div>
        <Top viewer={this.props.viewer}/>
        {this.props.children}
      </div>
    );
  }
}

export default Relay.createContainer(App, {
  fragments: {
    viewer: () => Relay.QL`
      fragment on Viewer {
        ${Top.getFragment('viewer')}
      }
    `,
  },
});

我不是 100% 确定这是否是原因，但我知道react-router v2.0.0-rc6发生了重大变化，顶级路由器导出被删除，但我真的不知道这对我意味着什么？难道我不能再使用路由器了吗？如果是这样，我应该怎么做？

经过几天的研究和反复试验，我放弃了，希望这里有人能提供帮助。任何指向正确方向的指针将不胜感激。

4

1 回答 1

2

终于得到了这个问题的答案，不得不添加以下更改以使我的代码再次工作：

import babelPolyfill from 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import Loader from 'react-loader';

import Relay from 'react-relay';
import useRelay from 'react-router-relay';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import applyRouterMiddleware from 'react-router/lib/applyRouterMiddleware';

import WelcomeQueries from './queries/WelcomeQueries';
import AppQueries from './queries/AppQueries';
import LandingQueries from './queries/LandingQueries';

import App from './components/app';
import Landing from './components/landing';

import './relay';

ReactDOM.render((
  <Router 
    history={browserHistory} 
    render={applyRouterMiddleware(useRelay)} 
    environment={Relay.Store}>

    <Route 
      component={App} 
      queries={AppQueries} 
      render={({ props }) => props ? <App {...props} /> : <Loader />}>

      <Route 
        path="/myapp" 
        component={Landing} 
        queries={LandingQueries} 
        render={({ props }) => props ? <Landing {...props} /> : <Loader />} />
    </Route>

    <Route 
      path="/myapp/tracks" 
      component={Welcome} 
      queries={WelcomeQueries} 
      render={({ props }) => props ? <Welcome {...props} /> : <Loader />} />

  </Router>
), document.getElementById('myapp-body'));

也许这会帮助别人:)

于 2016-08-04T21:07:17.093 回答