反应 - 未加载子路线

Question

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

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;

关于.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 中，您可以尝试用 App 替换您的块吗？

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

看起来你不需要那个块。