![](/img/trans.png)
[英]Error: Invariant Violation: addComponentAsRefTo when using react-router
[英]React error "Uncaught Invariant Violation" when using react-router
我很困惑這個錯誤消息可能意味着什么,或者為什么我只在嘗試使用 react-router 時才得到它。 如果我像這樣直接渲染組件,應用程序工作正常: render(<App />, document.getElementById('root'));
但是當我嘗試使用react-router
的<BrowserRouter>
、 <Match>',
和<Miss>
元素時,就像這樣: render(<Main />, document.getElementById('root'));
,我從控制台收到以下錯誤消息:
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of
Main Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of
.
我也在 invariant.js 文件中看到了這個錯誤: error.framesToPop = 1; // we don't care about invariant's own frame error = Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined...
error.framesToPop = 1; // we don't care about invariant's own frame error = Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined...
這是我的 index.js 文件
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Match, Miss } from 'react-router';
import App from './App';
import SineWave from './SineWave';
import NotFound from './NotFound';
import './index.css';
const Main = () => {
return (
<BrowserRouter>
<div>
<Match exactly pattern="/" component={App} />
<Match exactly pattern="/lesson-one" component={SineWave} />
<Miss component={NotFound} />
</div>
</BrowserRouter>
)
}
render(<Main />, document.getElementById('root'));
有誰知道這里有什么問題?
我不確定這是否有用,但這里是 webpack 數據,其中包含一些關於錯誤可能在哪里的線索:
function invariant(condition, format, a, b, c, d, e, f) {
if (true) {
if (format === undefined) {
throw new Error('invariant requires an error message argument');
}
}
if (!condition) {
var error;
if (format === undefined) {
error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
} else {
var args = [a, b, c, d, e, f];
var argIndex = 0;
error = new Error(format.replace(/%s/g, function () {
return args[argIndex++];
}));
error.name = 'Invariant Violation';
}
error.framesToPop = 1; // we don't care about invariant's own frame
throw error;
}
}
module.exports = invariant;
**可能導致問題的其他組件:這是我的 App.js 文件:
import React from 'react';
import './App.css';
import Header from './Header';
import Instructions from './Instructions';
import SineWave from './SineWave';
const App = (props) => {
return (
<div className="App">
<div className="header">
<Header />
</div>
<div className="body">
<div className="instructions">
<Instructions instructionText="Here are the instructions!"/>
</div>
<div className="SineWave">
<SineWave soundText="This is a sound."/>
</div>
</div>
</div>);
};
export default App;
這是 SineWave.js 文件,它也被引用:
import React from 'react';
class SineWave extends React.Component {
render() {
return (
<div>
<button classID="playSine">PLAY SINEWAVE</button>
<p>{this.props.soundText}</p>
</div>
)
}
}
export default SineWave;
最后,NotFound.js 文件:
import React from 'react';
class NotFound extends React.Component {
render() {
return (
<h2>Not Found!111!!</h2>
)
}
}
export default NotFound;
已解決:事實證明<BrowserRouter>
只能在 react-router v4 中使用...我使用的是 v2.8,這是您鍵入npm install --save react-router
時安裝的版本。 如果你想使用 react-router v4,你需要使用npm install --save react-router@next
。 這是 GitHub 上 v4 分支的鏈接:https ://github.com/ReactTraining/react-router/blob/v4/README.md –
你試過像這樣渲染 Main 嗎?:
render(
(
<Main/>
),
document.getElementById("selector")
);
請注意,我已將 Main 組件括在括號中。
這可能是一個愚蠢的解決方案,但我知道我以前遇到過這個問題,我相信這是渲染的問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.