2017-03-26 6 views
0

Ich implementiere reagieren Anwendung. Übrigens begegne ich einem reaktiven Router, der eine leere Seite ohne Fehler oder Ausnahme anzeigt. Ich habe den Stack-Overflow durchsucht und weiß, dass der Browse-Verlauf möglicherweise fehlt. Ich habe glücklicherweise noch nicht mal browseHistory implementiert und die Seite zeigt immer noch leer. React Router mit Handler zeigt leere Seite

Hier ist mein Code,

import React from 'react'; 
import ReactDOM from 'react-dom'; 
//import App from 'components/App.js'; 
//import Home from 'components/Home.js'; 
import injectTapEventPlugin from 'react-tap-event-plugin'; 
import { Router, Route, IndexRoute, browserHistory, hashHistory, RouteHandler } from 'react-router'; 

injectTapEventPlugin(); 

var Home = React.createClass({ 
    render: function() { 
    return (<h1>Welcome to the Home Page</h1>); 
    } 
}); 

let App = React.createClass({ 
    render() { 
     <div className="nav"> 
     <h1>It's work</h1> 
     <RouteHandler/> 
     </div> 
    } 
}); 

let routes = ( 
    <Route name="app" path="/" handler={App} > 
    <Route name="home" path="/home" handler={Home} /> 
    </Route> 
); 

ReactDOM.render(<Router routes={routes} history={browserHistory} />, document.getElementById('app')); 

zu jemandes Beitrag freuen, wenn Sie Idee zu diesem.

Hier ist mein Paket JSON.

{ 
    "name": "finalize", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "start": "node server.js" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.24.0", 
    "babel-eslint": "^7.2.1", 
    "babel-loader": "^6.4.1", 
    "babel-preset-es2015": "^6.24.0", 
    "babel-preset-react": "^6.23.0", 
    "babel-preset-stage-0": "^6.22.0", 
    "eslint": "^3.18.0", 
    "eslint-plugin-react": "^6.10.3", 
    "express": "^4.15.2", 
    "file-loader": "^0.10.1", 
    "react-hot-loader": "^1.3.1", 
    "webpack": "^2.3.2", 
    "webpack-dev-middleware": "^1.10.1", 
    "webpack-hot-middleware": "^2.17.1" 
    }, 
    "dependencies": { 
    "material-ui": "^0.17.1", 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2", 
    "react-router": "^3.0.2", 
    "react-tap-event-plugin": "^2.0.1" 
    } 
} 
+0

Mit 'reagieren-router', sollten Sie die Komponente zu übergeben, die die Route übereinstimmen mit die "Komponente" Requisiten und nicht "Handler". Sind Sie sicher, ein "# app" -Tag in Ihrer HTML-Seite zu haben? – felixyadomi

+0

ja, ich habe #app in meinem html. Andernfalls würde es ein Protokoll über "der Container ist kein DOM-Element" werfen. Aber jetzt zeigt es absolut kein Protokoll oder Fehler in der Konsole oder im Terminal. – A1ucard

+1

Warum 'var' an einer Stelle und' let' an der anderen? – Umair

Antwort

0

Ausgabe ist Sie return in App-Komponente zu verwenden vergessen haben, App Hauptkomponente ist, wenn Sie also nicht return alles tun wird, es immer leere Seite zeigen, verwenden Sie diese:

let App = React.createClass({ 
    render: function { 
     return (
       <div className="nav"> 
        <h1>It's work</h1> 
        <RouteHandler/> 
       </div> 
     ) 
    } 
}); 

statt handler Verwenden Sie component, handler wurde veraltet und wird in V3.x nicht unterstützt. check this: https://github.com/ReactTraining/react-router/issues/2887

es wie folgt verwendet:

let App = React.createClass({ 
    render: function() { 
     return (
      <div className="nav"> 
       <h1>It's work</h1> 
       {this.props.children} 
      </div> 
    ); 
    } 
}); 

let routes = ( 
    <Route name="app" path="/" component={App} > 
    <Route name="home" path="/home" component={Home} /> 
    </Route> 
); 

ReactDOM.render(<Router routes={routes} history={browserHistory} />, document.getElementById('app')); 

Überprüfen Sie die doc auch verwenden sie component: https://github.com/reactjs/react-router-tutorial/tree/master/lessons/02-rendering-a-route

+1

Ich glaube, das ist der Fehler. – Umair

+0

Welche Version des Routers verwenden Sie? –

+0

@Manyank Shukla, "Reagieren-Router": "^ 3.0.2", – A1ucard