reagieren Routing - Rendering-Fehler (einzelne Seite Anwendung)

Question

Hallo Ich lerne reagieren und versuchen, SPA zu erstellen, aber interne Seiten werden nicht gerendert.

nur gemacht wird, ist es Rendering nicht Interne Komponenten wie &

Kann nicht genau das Problem zu finden

ich mehrere Kombinationen für Route Weg versucht haben, wie

<Route path="/about" component={About}/> 
<Route path="about" component={About}/> 

Mein Code Complete

import React, { Component } from 'react'; 
import {render} from 'react-dom'; 
// import { Router, Route, Link } from 'react-router'; 
import { BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom'; 
import About from './About'; 
import Home from './Home'; 
import Repos from './Repos'; 
import AboutChild from './AboutChild'; 

class App extends Component { 
    constructor() { 
     super(...arguments); 
    } 
    render(){ 
     return (
      <div> 
       <menu> 
        <ul> 
         <li><Link to="/">Home</Link></li> 
         <li><Link to="/about">About</Link></li> 
         <li><Link to="/repos">Repos</Link></li> 
        </ul> 
       </menu> 
      </div>    
     ); 
    } 
} 


render((<Router> 
      <App> 
       <Route exact path="/" component={Home} /> 
       <Route path="/about" component={About}/> 
       <Route path="/repos" component={Repos}/> 
      </App> 
</Router>), document.getElementById('root')); 

Komponentenversionen von package.json

"dependencies": { 
    "react": "^15.0.0", 
    "react-dom": "^15.0.0", 
    "react-router": "^4.1.1", 
    "react-router-dom": "^4.1.1" 
    } 

Answer 1

In Ihrer App Komponente in machen Sie Kinder Requisiten zurückkehren müssen. Versuchen Sie diese

render(){ 
    return (
     <div> 
      <menu> 
       <ul> 
        <li><Link to="/">Home</Link></li> 
        <li><Link to="/about">About</Link></li> 
        <li><Link to="/repos">Repos</Link></li> 
       </ul> 
      </menu> 
      {this.props.children} 
     </div>    
    ); 
} 

Sie können auch Konstruktor entfernen, weil Sie es in diesem Beispiel nicht verwenden.

Answer 2

Fix Ihr Baumeister:

constructor(props) { 
    super(props); 
}