Javascript 反应-未加载子路由

所以我尝试使用新的react路由器加载一些子路由。但是，当我导航到该地址时，它只显示一个空白屏幕。到目前为止，我只有两个链接，/和/关于。我想要的是一个主页面，然后将组件加载到该页面中。例如，有App.js。这是我的主页，带有一个仪表板，可以将您链接到其他页面。然后还有两页主页和关于。我希望在默认情况下加载home，然后当我单击链接时，我希望将about页面加载到应用程序而不是home。如果我注释掉仪表板中的链接，页面将加载，但如果我将链接保留在仪表板中，则会出现错误。有没有人知道我做错了什么，或者知道如何实现我想要的

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './index.css';
ReactDOM.render(    
  <App/>
, document.getElementById('root'));
registerServiceWorker();

---

在你的index.js中，你能试着用应用程序替换你的块吗

index.js：

ReactDOM.render（，document.getElementById（'root'））；

---

不管怎么说，看起来你并不需要那个块。

我以前确实看到过这个错误——因为ReactRouter改变了它在最新版本中的使用方式。下面是一个例子（基于一些初学者工具包）：使用React router 3.x。对于4.x-我记不清具体内容，但您可能必须安装历史记录包并将其作为道具传递给路由器

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import {
  BrowserRouter as Router,
  Route,
  Link, 
  Switch
} from 'react-router-dom';

import Home from './Home';
import About from './About';
import Dashboard from './Dashboard';
import NotFound from './NotFound';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <Dashboard/>
        <Router>
          <div>
              <Route exact path="/" component={Home}/>
              <Route exact path="/about" component={About}/>
          </div>
        </Router>
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Dashboard extends Component {
  render() {
    return (
      <div >
        <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
        </ul>
      </div>
    );
  }
}
export default Dashboard;

import React, { Component } from 'react';

class Home extends Component {
  render() {
    return (
      <div >
        <h2>
            Home
        </h2>
      </div>
    );
  }
}
export default Home;

import React, { Component } from 'react';

class About extends Component {
  render() {
    return (
      <div >
        <h2>
            About
        </h2>
      </div>
    );
  }
}

export default About;

Warning: Failed context type: The context `router` is marked as required in `Link`, but its value is `undefined`.
    in Link (at Dashboard.js:8)
    in li (at Dashboard.js:8)
    in ul (at Dashboard.js:7)
    in div (at Dashboard.js:6)
    in Dashboard (at App.js:25)
    in div (at App.js:20)
    in App (at index.js:7)

Uncaught TypeError: Cannot read property 'history' of undefined
C:\Users\owner\MyWorkspace\Node\React-4\demo\node_modules\react-router-dom\es\Link.js:65 Uncaught TypeError: Cannot read property 'history' of undefined


Uncaught TypeError: Cannot read property '__reactInternalInstance$6sfrm3vc59' of null
    at Object.getClosestInstanceFromNode (C:\Users\owner\MyWorkspace\Node\React-4\demo\node_modules\react-dom\lib\ReactDOMComponentTree.js:113)