從v1.x更新react-router和react-router-relay到v2.x（位置「/」與任何路由不匹配）

我試圖更新react-router到v2.6並且react-router-在我的應用中轉發到v0.7，但我努力遵循更新日誌來解決所有重大更改。我想我已經解決了所有的變化，但是我仍然無法完成它的工作。從v1.x更新react-router和react-router-relay到v2.x（位置「/」與任何路由不匹配）

警告：[反應路由器]的位置「/」沒有匹配的路由

這裏是我做過什麼來解決變化的一步一步的指導。首先我更新了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" 
    },

我刪除了歷史模塊，因爲它現在是一個反應路由器的直接依賴關係。一旦我安裝了最新的模塊，我重裝我的網頁，並得到了以下錯誤：

錯誤1：

警告：[反應路由器]您似乎提供了一個過時的歷史對象<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接口。

第一個錯誤提供了反應路由器的升級指南的便捷鏈接，所以我跟着它並相應地更新了我的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

警告：[反應路由器]的位置「/」沒有匹配的路由

我相信這是我想要的解決方案。但是我沒」牛逼肯定，所以我也試着去的瀏覽器（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是正確的做法，但我不知道這有什麼錯誤的手段和Google上搜尋它，給了我噸答案（ 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曾與頂層的重大更改路由器導出被刪除，但我真的不知道這對我意味着什麼？我不能再使用路由器嗎？如果是這樣，我應該怎麼做呢？

經過幾天的研究和試驗和錯誤，我放棄了，希望有人在這裏可以提供幫助。任何正確的方向指針將不勝感激。

來源

2016-07-28 alengel

最後得到的回答這個問題，不得不添加下面的變化使我的工作再次：

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-04 21:07:17 alengel

從v1.x更新react-router和react-router-relay到v2.x（位置「/」與任何路由不匹配）

回答

相關問題