Question

所以我正在尝试使用新的react-router加载一些子路由。但是，当我导航到地址时，它只显示一个空白屏幕。到目前为止，我只有两个链接，/和/ about。我想要的是一个主页面，然后将组件加载到该页面。例如，有App.js.这是我的主页，其中包含一个仪表板，可将您链接到其他页面。然后又有两页回家了。我希望home默认加载，然后当我点击链接时我希望将about页面加载到app而不是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();

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中你可以尝试用App替换你的块吗？

index.js： Future

无论如何，你看起来并不需要那个区块。

React - 未加载的子路由

1 个答案: