React 라우터를 사용하는 동안 React 오류 "캡처되지 않은 충돌"

질문:

나는 이 오류 메시지의 의미에 곤란해졌거나, 왜 나는react 공유기를 사용해 보려고만 했을 때만 그것을 받았는가.만약 내가 아래와 같이 구성 요소를 직접 렌더링한다면 프로그램은 정상적으로 작동할 수 있다. render(<App />, document.getElementById('root'));그러나 <BrowserRouter><Match>',, <Miss>react-router 요소를 사용하려고 했을 때, 예를 들어 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...이것은 나의 색인이다.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'));
여기에 무슨 문제가 생겼는지 아시는 분?
이것이 유용한지 모르겠지만 다음은 오류가 있을 수 있는 웹 페이지 데이터에 대한 것입니다.
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;
** 장애가 발생할 수 있는 추가 부품:
이것은 나의 응용 프로그램이다.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;
이것은 정현파다.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;
마지막으로 우리는 찾지 못한 것을 발견했다.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 [email protected]를 사용해야 합니다.GitHub의 v4 분기에 대한 링크가 있습니다. https://github.com/ReactTraining/react-router/blob/v4/README.md