React Router不工作：接收没有错误但没有渲染任何内容

Question

我是React JS的新手，我遇到了React Router的问题。路由器根本不工作！我尝试了几种不同的sytax，但没有运气。下面提供的代码不会给我一个错误，但没有任何渲染到我的index.php页面。

我的主要条目js文件是index.js，它看起来像这样：

index.JS：

        import React from 'react';
        import ReactDOM from 'react-dom';
        import  {BrowserRouter as Router, Route, Link, Match, Miss, hashHistory}  from 'react-router';
        import {TopNavigation, SideNavigation}  from "./components/MainNav";
        import AllShipments from "./components/shipments";
        import RouterNav from "./components/RouterNav";
        import IndividualShipment from "./components/individualShipment";
        import Dashboard from "./components/dashboard";


        "use strict"
        require('../scss/custom.scss');



        class ContentContainer extends React.Component  {
            render () {
            return (

            <div>

                <TopNavigation/>
                <RouterNav/>

                <div className="section-wrap-b floatDown">
                    <div className="widget-header">
                        <h3>HEADER</h3>
                    </div>
                </div>

                <Router history={hashHistory} >
                    <Route path="/" component={AllShipments} />
                    <Route path="/individualshipment" component={IndividualShipment} />
                    <Route path="/dashboard" component={Dashboard} />
                </Router>

                <Match exactly pattern='/' component={AllShipments}/>
                <Match pattern='/individualshipment' component={IndividualShipment}/>
                <Match pattern='/dashboard' component={Dashboard}/>
            </div>  
            )
        }
        }

        ReactDOM.render(

            <ContentContainer/>,
            document.getElementById('root-content-area')
        );

示例组件结构在AllShipments.js，Individualshipmn.js，Dashboard.js中显示如下

示例：

        import React from "react";
        import ReactDOM from 'react-dom';




        const Dashboard = () => {
            return (
                <div>   
                            <h3>Dashboard</h3>
                </div>
            );
        };
        export default Dashboard;

package.json文件：

        {
          "name": "js-practice",
          "version": "1.0.0",
          "description": "",
          "main": "webpack.config.js",
          "scripts": {
            "babel": "babel",
            "webpack": "webpack",
            "test": "echo \"Error: no test specified\" && exit 1",
            "build": "webpack -d && cp src/app.js dist/bundle.js && webpack-dev-server --content-base src/ --inline --hot --history-api-fallback",
            "build:prod": "webpack -p && cp src/app.js dist/bundle.js"
          },
          "author": "Adam Donatelli",
          "license": "ISC",
          "devDependencies": {
            "babel-core": "^6.25.0",
            "babel-loader": "^7.1.1",
            "babel-polyfill": "^6.23.0",
            "babel-preset-env": "^1.5.2",
            "babel-preset-es2015": "^6.24.1",
            "babel-preset-react": "^6.24.1",
            "css-loader": "^0.28.4",
            "extract-text-webpack-plugin": "^2.1.2",
            "fast-sass-loader": "^1.2.5",
            "file-loader": "^0.11.2",
            "node-sass": "^4.5.3",
            "resolve-url-loader": "^2.1.0",
            "sass-loader": "^6.0.6",
            "style-loader": "^0.18.2",
            "url-loader": "^0.5.9",
            "webpack": "^3.0.0"
          },
          "dependencies": {
            "history": "^4.6.3",
            "jquery": "^3.2.1",
            "react": "^15.6.1",
            "react-dom": "^15.6.1",
            "react-router": "^4.1.1"
          }
        }