React 4 Router error =類型是無效的預期字符串，但未定義

Question

有一個非常簡單的React問題，我正在嘗試做一些簡單的路由。 主頁，個人資料頁面，404頁面。 但是，請保持相同的錯誤。

我的組件成功呈現后，它們的組件似乎正在工作，但是，當我嘗試實現路由時，立即收到以下錯誤消息。

錯誤： 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. 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.

我以前已經獲得了像這樣工作的路由（react router v 4.0.0），所以我不確定我在這里犯了什么錯誤。 向正確方向的任何推動將不勝感激。 提前致謝。

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"
  }

在此處輸入圖片說明

Answer 1

在App.js中，您應該更改以下內容：

<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>

當其中一個已渲染時，使用Switch元素停止驗證其他路由。

並且不要忘記從react-router-dom而不是react-router導入這些模塊（ Route ， Switch和BrowserRouter ）。