React error”;Uncaught Invariant Violation”;当使用react路由器时

React error "Uncaught Invariant Violation" when using react-router

本文关键字：react 路由器 Violation error Uncaught Invariant React      更新时间：2023-09-26

我很困惑这个错误消息可能意味着什么，或者为什么我只在尝试使用react路由器时得到它。如果我像这样直接渲染组件，该应用程序运行良好：render(<App />, document.getElementById('root'));

但当我尝试使用<BrowserRouter>、<Match>',&react-router中的<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主.

我还在一个不变量.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...

这是我的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路由器v4中使用。。。我使用的是v2.8，这是您键入npm install --save react-router时安装的版本。如果你想使用react路由器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")
);

请注意，我已将主要组成部分括在括号中。

这可能是一个愚蠢的解决方案，但我知道我以前遇到过这种情况，我相信这是渲染的问题。

相关文章：