将 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)

查看：47
本文介绍了将 react-router 和 react-router-relay 从 v1.x 更新到 v2.x(位置“/"没有匹配任何路由)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在我的应用程序中将 react-router 更新到 v2.6 并将 react-router-relay 更新到 v0.7，但我正在努力遵循更改日志以解决所有重大更改.我想我解决了所有更改，但仍然无法使其正常工作.

<块引用>

警告:[react-router] 位置/"与任何路由都不匹配

以下是我为应对这些变化所做的工作的分步指南.首先我更新了 npm 模块.

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

依赖项":{"babel-polyfill": "^6.9.1","babel-runtime": "^6.9.2","graphiql": "0.7.3","graphql": "^0.6.2","历史": "1.13.1","isomorphic-fetch": "^2.1.1",反应":^ 15.2.1"，"react-addons-shallow-compare": "^15.2.1","react-dom": "^15.2.1","反应加载器": "^2.0.0","反应中继": "^0.9.2",反应路由器":1.0.0-rc3"，反应路由器中继":^ 0.7.0"，超级代理":^1.2.0"},开发依赖":{"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，出现错误:

依赖项":{"babel-polyfill": "^6.9.1","babel-runtime": "^6.9.2","graphiql": "0.7.3","graphql": "^0.6.2","isomorphic-fetch": "^2.1.1",反应":^ 15.2.1"，"react-addons-shallow-compare": "^15.2.1","react-dom": "^15.2.1","反应加载器": "^2.0.0","反应中继": "^0.9.2",反应路由器":^ 2.6.0"，反应路由器中继":^ 0.13.3"，超级代理":^1.2.0"},开发依赖":{"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) 的无效 prop/context relay，预期 undefined 是符合RelayEnvironment 接口.

 in Relay(App)(由 RouterContext 创建)在 RouterContext 中(由路由器创建)在路由器

错误 3:

<块引用>

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

 in Relay(App)(由 RouterContext 创建)在 RouterContext 中(由路由器创建)在路由器

错误 4:

<块引用>

未捕获的不变违规:RelayContainer:Relay(App) 使用无效的 Relay 上下文 undefined 呈现.确保 React 上下文中的 relay 属性符合 RelayEnvironment 接口.

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

在我更改之前它是这样的:

从 'babel-polyfill' 导入 babelPolyfill;从反应"导入反应；从 'react-dom' 导入 ReactDOM；从 'react-router-relay' 导入 ReactRouterRelay；从反应加载器"导入加载器；从反应路由器"导入{路由器，路由}；从'history/lib/createBrowserHistory'导入createBrowserHistory；从'./queries/WelcomeQueries'导入WelcomeQueries；从 './queries/AppQueries' 导入 AppQueries；从'./queries/LandingQueries'导入LandingQueries；从'./components/app'导入应用程序；从'./components/landing'导入登陆；导入 './relay';const renderProps = {渲染加载:() =><装载机/>,};ReactDOM.render((<路由器历史={createBrowserHistory()} createElement={ReactRouterRelay.createElement}><Route component={App} queries={AppQueries} {...renderProps}><Route path="/myapp" component={Landing} queries={LandingQueries} {...renderProps}/></路线><Route path="/myapp/tracks" component={Welcome} queries={WelcomeQueries} {...renderProps}/></路由器>), document.getElementById('myapp-body'));

尝试 1

使用 2.x 的更新指南，我已将 app.js 文件更改为使用自定义历史，如下所示:

从 'babel-polyfill' 导入 babelPolyfill;从反应"导入反应；从 'react-dom' 导入 ReactDOM；从 'react-router-relay' 导入 ReactRouterRelay；从反应加载器"导入加载器；从反应路由器"导入{路由器，路由，useRouterHistory}从历史"导入 { createHashHistory }从'./queries/WelcomeQueries'导入WelcomeQueries；从 './queries/AppQueries' 导入 AppQueries；从'./queries/LandingQueries'导入LandingQueries；从'./components/app'导入应用程序；从'./components/landing'导入登陆；导入 './relay';const renderProps = {渲染加载:() =><装载机/>,};const appHistory = useRouterHistory(createHashHistory)({ queryKey: false })ReactDOM.render((<路由器历史={appHistory} createElement={ReactRouterRelay.createElement}><Route component={App} queries={AppQueries} {...renderProps}><Route path="/myapp" component={Landing} queries={LandingQueries} {...renderProps}/></路线><Route path="/myapp/tracks" component={Welcome} queries={WelcomeQueries} {...renderProps}/></路由器>), document.getElementById('myapp-body'));

这会在浏览器中给我以下错误:

错误 5

<块引用>

警告:[react-router] 位置/"与任何路由都不匹配

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

尝试 2

从 'babel-polyfill' 导入 babelPolyfill;从反应"导入反应；从 'react-dom' 导入 ReactDOM；从 'react-router-relay' 导入 ReactRouterRelay；从反应加载器"导入加载器；从反应路由器"导入{路由器，路由，浏览器历史}从'./queries/WelcomeQueries'导入WelcomeQueries；从 './queries/AppQueries' 导入 AppQueries；从'./queries/LandingQueries'导入LandingQueries；从'./components/app'导入应用程序；从'./components/landing'导入登陆；导入 './relay';const renderProps = {渲染加载:() =><装载机/>,};const appHistory = useRouterHistory(createHashHistory)({ queryKey: false })ReactDOM.render((<路由器历史={browserHistory} createElement={ReactRouterRelay.createElement}><Route component={App} queries={AppQueries} {...renderProps}><Route path="/myapp" component={Landing} queries={LandingQueries} {...renderProps}/></路线><Route path="/myapp/tracks" component={Welcome} queries={WelcomeQueries} {...renderProps}/></路由器>), document.getElementById('myapp-body'));

加载这个时，我得到错误 2、3 和 4.我认为尝试 1 是正确的方法，但我不知道这个错误意味着什么并在谷歌上搜索它，给了我很多答案(1、2，将我链接到 3 甚至 4 和 IndexRoute)，我试过了，但没有一个答案奏效.

我的 App.js 文件是这样的，仅供参考:

从'react'导入React；从反应中继"导入中继；从 './top' 导入顶部；导出类 App 扩展 React.Component {使成为() {返回 (<div><顶级观众={this.props.viewer}/>{this.props.children}

);}}导出默认 Relay.createContainer(App, {片段:{查看器: () =>中继.QL`查看器上的片段{${Top.getFragment('viewer')}}`，},});

我不确定这是否是原因，但我知道 react-router v2.0.0-rc6 有一个突破性的变化，顶级路由器导出被删除，但我真的不知道这对我意味着什么?那我不能再使用路由器了吗?如果是这样，我应该怎么做?

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

解决方案

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

从 'babel-polyfill' 导入 babelPolyfill;从反应"导入反应；从 'react-dom' 导入 ReactDOM；从反应加载器"导入加载器；从反应中继"导入中继；从 'react-router-relay' 导入 useRelay；import { Router, Route, IndexRoute, browserHistory } from 'react-router';从 'react-router/lib/applyRouterMiddleware' 导入 applyRouterMiddleware；从'./queries/WelcomeQueries'导入WelcomeQueries；从 './queries/AppQueries' 导入 AppQueries；从'./queries/LandingQueries'导入LandingQueries；从'./components/app'导入应用程序；从'./components/landing'导入登陆；导入 './relay';ReactDOM.render((<路由器历史={浏览器历史}渲染={applyRouterMiddleware(useRelay)}环境={Relay.Store}><路线组件={应用}查询={AppQueries}render={({ props }) =>道具 ?<App {...props}/>:<加载器/>}><路线路径=/我的应用程序"组件={着陆}查询={LandingQueries}render={({ props }) =>道具 ?<着陆{...道具}/>:<加载器/>}/></路线><路线路径="/myapp/tracks"组件={欢迎}查询={WelcomeQueries}render={({ props }) =>道具 ?<欢迎{...道具}/>:<加载器/>}/></路由器>), document.getElementById('myapp-body'));

也许这会帮助其他人:)

I'm trying to update react-router to v2.6 and react-router-relay to v0.7 in my app but I'm struggling to follow the changelogs to address all breaking changes. I think I addressed all changes but I still can't make it work.

Warning: [react-router] Location "/" did not match any routes

Here is a step by step guide on what I did to address the changes. First I updated the npm modules.

My previous package.json where everything worked:

"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"
  },

My new package.json, where I'm getting errors:

"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"
  },

I removed the history module because it is now a direct dependency of react-router. Once I installed the latest modules, I reloaded my page and got the following errors:

Error 1:

Warning: [react-router] It appears you have provided a deprecated history object to <Router/>, please use a history provided by React Router with import { browserHistory } from 'react-router' or import { hashHistory } from 'react-router'. If you are using a custom history please create it with useRouterHistory, see https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#using-history-with-router for details.

Error 2:

Warning: Failed context type: Invalid prop/context relay supplied to Relay(App), expected undefined to be an object conforming to the RelayEnvironment interface.

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

Error 3:

Warning: Failed context type: Required context route was not specified in Relay(App).

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

Error 4:

Uncaught Invariant Violation: RelayContainer: Relay(App) was rendered with invalid Relay context undefined. Make sure the relay property on the React context conforms to the RelayEnvironment interface.

The first error gives a handy link to the upgrade-guides for react-router, so I followed it and updated my app.js file accordingly.

Before my changes it looked this:

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

Attempt 1

Using the update guide to 2.x I've changed my app.js file to use a custom history like this:

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

This then gives me the following error in the browser:

Error 5

Warning: [react-router] Location "/" did not match any routes

I believe that is the solution I want.. However I wasn't sure, so I also tried going the Browser (HTML5 pushState) History way and tried the following change:

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

When loading this, I get back errors 2, 3 and 4. I think Attempt 1 is the correct approach but I don't know what this error means and googling it, gave me tons of answers (1, 2, which linked me to 3 and even 4 with IndexRoute), which I tried but none of the answers worked.

My App.js file looks like this, just for reference:

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')}
      }
    `,
  },
});

I'm not 100% sure if this might be the reason but I know that react-router v2.0.0-rc6 had a breaking change with the top level Router export being removed but I don't really know what that means for me? Does that I can't use Router anymore? If so, what am I supposed to instead?

After days of research and trial and error, I'm giving up and hope that someone here can help. Any pointers in the right direction would be greatly appreciated.

解决方案

Finally got an answer to this question and had to add the following changes to make my code work again:

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

Maybe this will help someone else :)

这篇关于将 react-router 和 react-router-relay 从 v1.x 更新到 v2.x(位置“/"没有匹配任何路由)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆