リアクション4ルーターエラー=タイプが無効ですが予想外の文字列ですが、定義されていません

Question

まっすぐ進むリアクション質問があります。ホームページ、プロフィールページ、404ページしかし、同じエラーが発生し続ける。

私のコンポーネントは正常にレンダリングされたため動作していますが、すぐにルーティングを実装しようとすると次のエラーが発生します。

エラー：私は私がここで作っていますどのような間違いわからないイムので（ルータV 4.0.0を反応させる）以前にこのように動作するようにルートを得ているWarning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of Root.

。正しい方向へのプッシュは感謝されます。前もって感謝します。

App.js

import React, { Component } from 'react'; 
import ReactDOM, { render } from 'react-dom'; 
import { BrowserRouter as Router, Match, Miss } from 'react-router'; 

//Components 
import Home from './components/Home'; 
import Profile from './components/Profile'; 
import NotFound from './components/NotFound'; 

const Routes =() => { 
    return (
     <Router> 
      <div> 
       <Match exactly pattern="/" component={Home} /> 
       <Match exactly pattern="/profile/:profileId" component={Profile} /> 
       <Miss component={NotFound} /> 
      </div> 
     </Router> 
    ) 
} 

render(<Routes />, document.querySelector('#container')); 

ホーム成分

import React, { Component } from 'react'; 

class Home extends Component { 
    render() { 
     return (
      <p>Home Page</p> 
     ) 
    } 
} 

export default Home; 

プロファイルコンポーネント

import React, { Component } from 'react'; 

class Profile extends Component { 
    render() { 
     return (
      <p>Profile Page</p> 
     ) 
    } 
} 

export default Profile; 

Package.json

"dependencies": { 
    "html-webpack-plugin": "^2.28.0", 
    "react": "^15.5.4", 
    "react-dom": "^15.5.4", 
    "react-router": "^4.1.1", 
    "webpack": "^2.5.1", 
    "webpack-dev-server": "^2.4.5" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.24.1", 
    "babel-loader": "^7.0.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1" 
    } 

App.jsでenter image description here

Answer 1

あなたはこれを変更する必要があります。

<Router> 
    <div> 
     <Match exactly pattern="/" component={Home} /> 
     <Match exactly pattern="/profile/:profileId" component={Profile} /> 
     <Miss component={NotFound} /> 
    </div> 
</Router> 

この

<Router> 
    <Switch> 
     <Route path="/" exact component={Home} /> 
     <Route path="/profile/:profileId" exact component={Profile}" /> 
     <Route component={NotFound} /> 
    </Switch> 
</Router> 

に切り替える要素が検証を停止するために使用されますそれらのうちの1つがレンダリングしたときの他のルート。

そしてreact-router-dom代わりのreact-routerからこれらのモジュール（Route、SwitchとBrowserRouter）をインポートすることを忘れないでください。