反応ルータを使用しているときの反応エラー "キャッチ不変の違反"

Question

私はこのエラーメッセージが意味することができないか、反応ルータを使用しようとしているときにのみそれを得る理由を困惑しています。 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メイン.

私も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...

ここに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'; 

class SineWave extends React.Component { 
    render() { 
    return (
     <div> 
     <button classID="playSine">PLAY SINEWAVE</button> 
     <p>{this.props.soundText}</p> 
     </div> 
    ) 
    } 
} 

export default SineWave; 

：ここ

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ファイルです

そして最後に、NotFound.jsファイル：これは私がカッコ内の主要コンポーネントを包囲している

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

注意を?:よう

import React from 'react'; 

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

export default NotFound; 

Answer 1

はを解決しよう：それは私はあなたがnpm install --save react-routerを入力するときにインストールされていたバージョンであるV2.8を、使用していた... <BrowserRouter>が反応し、ルータをV4にのみ使用することができることが判明しました。反応ルータv4を使用する場合は、npm install --save react-router@nextを使用する必要があります。 GitHubのv4ブランチへのリンク：https://github.com/ReactTraining/react-router/blob/v4/README.md -

Answer 2

あなたがメインのレンダリングしようとしています。

これは愚かな解決策かもしれませんが、私はこれまでに遭遇したことを知っており、レンダリングの問題であると信じています。