Javascript React路由器不工作：未接收错误但未呈现任何内容

我是React JS新手，React路由器有问题。路由器根本不工作！我试过几种不同的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')
        );

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




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

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

---

您是否尝试过向主路径添加

exact

属性？如下：

现在基本上所有路由都匹配正斜杠，因此当您尝试转到新路由时，路由器会看到它匹配正斜杠。还要确保使用react路由器dom：感谢您的回复。关于必须使用react路由器dom，您当然是对的。我在将我的js文件导入其他js文件时也遇到了问题，这导致我在合并所有组件时遇到了问题。我发现我的导入对象需要更正。在上面的“示例”组件中，我在组件中包含了“return（）”。将此“示例”组件导入到主导出js文件（index.js）以外的js文件时，两个文件都不会呈现。我删除了“return（）”，这解决了导入问题。