反應路由器與處理程序顯示空白頁

我正在實施反應的應用程序。順便說一下，我遇到的反應路由器顯示空白頁面沒有任何錯誤或異常。我已經通過堆棧溢出進行搜索，並知道瀏覽歷史記錄可能會丟失。我還沒有運氣，甚至實施browseHistory和頁面仍然顯示空白。反應路由器與處理程序顯示空白頁

這裏是我的代碼，

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

欣賞到別人的貢獻，如果你有這個想法。

這是我的包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" 
    } 
}

來源

2017-03-26 A1ucard

隨着'反應-router'，你應該通過匹配的路由組件'組件'道具而不是'處理程序'。另外，你確定在你的html頁面中有一個'＃app'標籤嗎？ – felixyadomi

是的，我有#app在我的HTML。否則，它會拋出一個關於「容器不是DOM元素」的日誌。但現在，它完全沒有在控制檯或終端中顯示任何日誌或錯誤。 – A1ucard

爲什麼在一個地方使用'var'而在另一個地方使用'let'？ – Umair

問題是你忘了在應用程序組件使用return，應用爲主要成分，所以如果你不return任何它總是會顯示空白頁，使用此：

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

代替handler使用component,handler已被棄用，並且在v3.x中不受支持。檢查：https://github.com/ReactTraining/react-router/issues/2887

使用方法如下：

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

檢查文檔也是他們所使用component：https://github.com/reactjs/react-router-tutorial/tree/master/lessons/02-rendering-a-route

來源

2017-03-26 15:09:39

我認爲這是錯誤。 – Umair

你正在使用哪個版本的路由器？ –

@Manyank Shukla，「react-router」：「^ 3.0.2」， – A1ucard

反應路由器與處理程序顯示空白頁

回答

相關問題