将 react-router 和 react-router-relay 从 v1.x 更新到 v2.x（位置“/”不匹配任何路由）答案

【问题标题】：Update react-router and react-router-relay to v2.x from v1.x (Location "/" did not match any routes)将 react-router 和 react-router-relay 从 v1.x 更新到 v2.x（位置“/”不匹配任何路由）
【发布时间】：2016-12-03 09:40:29
【问题描述】：

我正在尝试在我的应用程序中将 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 的直接依赖项。安装最新模块后，我重新加载了页面并收到以下错误：

错误 1：

警告：[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(App) 的属性/上下文relay 无效，应将undefined 视为符合RelayEnvironment 接口的对象。
in Relay(App) (created by RouterContext)
in RouterContext (created by Router)
in Router

错误 3：

警告：上下文类型失败：Relay(App) 中未指定必需的上下文 route。
in Relay(App) (created by RouterContext)
in RouterContext (created by Router)
in Router

错误 4：

未捕获的不变违规：RelayContainer：Relay(App) 使用无效的中继上下文 undefined 呈现。确保 React 上下文中的 relay 属性符合 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] 位置“/”不匹配任何路由

我相信这是我想要的解决方案。但是我不确定，所以我也尝试了 Browser (HTML5 pushState) History 方式并尝试了以下更改：

尝试 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, @ 987654323@，它把我链接到3，甚至用IndexRoute链接到4），我试过了，但没有一个答案奏效。

我的 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 发生了重大变化，移除了顶级路由器导出，但我真的不知道这对我意味着什么？难道我不能再使用路由器了吗？如果是这样，我应该怎么做？

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

【问题讨论】：

标签： react-router react-router-relay

【解决方案1】：

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

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'));

也许这对其他人有帮助:)

【讨论】：