我正在尝试在我的应用程序中将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"
},
我删除了历史模块,因为它现在是反应路由器的直接依赖项。安装最新模块后,我重新加载页面并收到以下错误:
Error 1:
警告:[react-router] 看来您已经提供了一个已弃用的历史对象<Router/>
,请使用 React Router 提供的历史记录import { browserHistory } from 'react-router'
or import { hashHistory } from 'react-router'
。如果您使用自定义历史记录,请使用以下命令创建它useRouterHistory
, see https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#using-history-with-router https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#using-history-with-router了解详情。
Error 2:
警告:失败的上下文类型:无效的 prop/contextrelay
供应给Relay(App)
, 预期的undefined
是一个符合RelayEnvironment
界面。
in Relay(App) (created by RouterContext)
in RouterContext (created by Router)
in Router
Error 3:
警告:失败的上下文类型:必需的上下文route
没有指定在Relay(App)
.
in Relay(App) (created by RouterContext)
in RouterContext (created by Router)
in Router
Error 4:
未捕获的不变违规:RelayContainer:Relay(App)
使用无效的中继上下文进行渲染undefined
。确保relay
React 上下文上的属性符合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'));
然后,这会在浏览器中出现以下错误:
Error 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 https://stackoverflow.com/questions/34837138/react-router-location-did-not-match-any-routes, 2 https://github.com/reactjs/react-router/issues/2117,这将我链接到3 https://github.com/reactjs/react-router/blob/master/upgrade-guides/v1.0.0.md#links乃至4 https://github.com/reactjs/react-router/issues/3541与 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% 确定这是否是原因,但我知道反应路由器 v2.0.0-rc6 https://github.com/reactjs/react-router/blob/master/CHANGES.md#v200-rc6发生了重大变化,顶级路由器导出被删除,但我真的不知道这对我意味着什么?那我就不能再用路由器了吗?如果是这样,我该怎么办?
经过几天的研究和反复试验,我放弃了,希望这里有人能提供帮助。任何正确方向的指示将不胜感激。