Javascript “反应错误”；未捕获不变违反”；使用react路由器时

我被这个错误消息的含义难住了，或者为什么我只在尝试使用react路由器时才收到它。如果我像下面这样直接渲染组件，那么应用程序可以正常工作：

render（，document.getElementById（'root'）

但是，当我尝试使用
，
，
&
元素时，来自
react router
，如下所示：
render（，document.getElementById（'root'），我从控制台收到以下错误消息：

Uncaught不变量冲突：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。检查
Main

我还在invariant.js文件中看到这个错误：
error.framesToPop=1；//我们不关心不变量自身的帧错误=错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义…

这是我的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'));

**可能导致故障的其他部件：
这是我的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;

从“React”导入React；
导入“/App.css”；
从“./头”导入头；
从“./指令”导入指令；
从“/SineWave”导入正弦波；
常量应用=（道具）=>{
返回(
);
};
导出默认应用程序；

这里是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;

从“React”导入React；
类SineWave.Component{
render（）{
返回(
播放正弦波
{this.props.soundText}

)
}
}
输出默认正弦波；

最后是NotFound.js文件：

import React from 'react';

class NotFound extends React.Component {
  render() {
    return (
      <h2>Not Found!111!!</h2>
    )
  }
}

export default NotFound;

从“React”导入React；
类NotFound扩展了React.Component{
render（）{
返回(
找不到！111！！
)
}
}
未找到导出默认值；
您尝试过这样渲染Main吗？：

render(
    (
        <Main/>
    ),
    document.getElementById("selector")
);

渲染(
(
),
document.getElementById（“选择器”）
);

请注意，我已将主要组件括在括号中

这可能是一个愚蠢的解决方案，但我知道我以前遇到过这个问题，我相信这是渲染方面的问题。
解决了：事实证明，
只能在react router v4中使用。。。我使用的是v2.8，这是您键入
npm install--save react router
时安装的版本。如果要使用react路由器v4，则需要使用
npm安装--save react-router@next
。这里有一个指向GitHub上v4分支的链接：–
还要检查应用程序和SinveWave组件。这也可能是个问题。你能把那个牙套贴上去吗！我已经发布了应用程序、SineWave和NotFound组件，以防它们出现问题。我真的认为这是安装了
react路由器
的问题吗
npm安装——保存react路由器
是的，
react路由器
肯定已安装。此解决方案似乎对我不起作用。它给了我一个错误
uncaughttypeerror:document.getElementByID不是一个函数
那是我的拼写错误，应该是
getElementByID
。明白了。不幸的是，该死的。。。如果代码是开源的，请链接github项目，我可以尝试在我的机器上运行它来调试它。你真是太好了irl:）下面是github repo链接：
render(
    (
        <Main/>
    ),
    document.getElementById("selector")
);