反应-没有装载的儿童路线

Question

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

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();

App.js

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;

dashboard.js

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;

home.js

import React, { Component } from 'react';

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

about.js

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)

Answer 1

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

index.js：ReactDOM.render(<App/>, document.getElementById('root'));

反正你也不需要那个街区。