React路由器呈現空白頁面

我正在構建一個反應應用程序，並且反應路由器呈現一個黑色頁面。我搜索了一下，似乎無法弄清楚發生了什麼。React路由器呈現空白頁面

指數

import React from 'react' 
import {render} from 'react-dom' 
import routes from './routes' 
render(routes, document.getElementById('root'))

路線

import React, { Component } from 'react' 
import { Router, Route, hashHistory } from 'react-router' 
import Home from './Home.js' 
import Name from './Name.js' 
//import level from './level.js' 
//import level1 from './level1.js' 
//import level2 from './level2.js' 
//import result from './result.js' 

const routes = (
    <Router history={hashHistory}> 
    <Route path='/' component={Home} /> 
    <Route path='/name' component={Name} /> 
    </Router> 
); 

export default routes;

分量不通過導航/姓名渲染

import React, { Component } from 'react' 
import appState from './state.js' 
import { Router } from 'react-router' 

class Name extends Component { 
    constructor() { 
    super(); 
    this.state = {username: ''}; 
    } 

    onUpdateUser = (e) => { 
    this.appState.username = e.target.value; 
    Router.push({ 
     pathname: '/level' 
    }) 
    } 

    render() { 
    return (
     <div className="row"> 
     <div claassName="col-md-12"> 
      <div className="nameBox"> 
      <form className="form-inline" onSubmit={this.onUpdateUser()}> 
       <input type="text" className="form-control" placeholder="Desiered Username" onChange={this.onUpdateUser} value={this.state.username} /> 
       <button type="submit" className="btn btn-success">Submit</button> 
      </form> 
      </div> 
     </div> 
     </div> 
    ) 
    } 
} 

export default Name

任何幫助，將不勝感激！PS指數路徑工作正常。

來源

2017-02-03 Quesofat

它看起來像你導航到/水平（不存在的路線），而不是/名稱。檢查你的瀏覽器的錯誤控制檯，看看你是否得到了這樣的錯誤：「警告：[react-router]位置」/級別「與任何路由不匹配」 –

傑夫，我認爲它只會導航到/級別提交按鈕。我該如何解決？ – Quesofat

更改爲onSubmit = {（e）=> this.onUpdateUser（e）} –

./routes的路徑是什麼？你有一個/routes/index.js文件，其中包含您爲路由放置的代碼？

此外，我建議您使用browserHistory而不是hashHistory'正常'的網址，沒有散列。有關此信息here

對於您的Name類，我建議您使用React Router中的withRouter高階組件。這會在組件內注入'router'作爲道具，因此您可以使用this.props.router.push('/path')。

this.appState實際上現在什麼都沒做。您正在導入未被觸及的'appState'。現在你在Name組件中設置'appState'。你不是故意使用this.setState({ username: e.target.value })?。對於類函數，使用onUpdateUser(e) { code }而不是箭頭函數也是更好的做法。

我也看到<form className="form-inline" onSubmit={this.onUpdateUser()}> - 我認爲onUpdateUser目前在渲染該組件時被調用。您應該使用onSubmit={this.onUpdateUser}來代替，因此當觸發onSubmit時會調用該函數。或者onSubmit={e => this.onUpdateUser(e)}，這兩件事情都有效。

你試圖用這段代碼實現什麼功能？

編輯：

我已在我創建了一個要點的介紹 - 設置的用戶名 - 選擇水平 - 休息「，而無需使用路由器作出反應流程。 React路由器並不總是必要的，特別是對於你真正想要控制必須顯示的視圖流的事情。

https://gist.github.com/Alserda/150e6784f96836540b72563c2bf331d0

來源

2017-02-03 23:03:45 Alserda

我非常感謝您的反饋。至於我試圖完成什麼？我是一個反應noob。這是我第一次反應水療，我正在試圖建立一個沃爾多的遊戲。理想情況是，發生什麼是在onSubmit用戶名存儲在一個狀態存儲以供稍後使用，然後重定向玩家選擇一個遊戲級別。 – Quesofat

不客氣！ React絕對值得學習，一旦掌握了它，它就會變得非常有趣。 - 你的state.js目前的樣子是什麼？你有什麼樣的Git回購，我可以看看？我個人使用Redux來處理與應用程序狀態相關的問題，但我不會真正推薦如果你真的開始了，因爲我認爲在React中學習正常'狀態'更重要。我可能會建議提高狀態。如在;你有一個Game.js組件，其狀態爲持有用戶名並決定顯示哪個組件（Home/Name/Level） – Alserda

將此項添加到您的索引文件。您可能需要使用react-router的實際Router。

//Import Dependencies. 
import { Router } from 'react-router'; 

//Import Routes. 
import routes from './routes/routes.js'; 

render(<Router routes={routes} />, document.getElementById('root'))

使用ReactDom爲react-dom而不是render。

import ReactDOM from 'react-dom'; 

ReactDom.render(<Router routes={routes} />, document.getElementById('root'));

來源

2017-02-03 21:55:39 Josh

這會導致一個錯誤：未捕獲的TypeError：無法在Object.createTransitionManager（Router.js：111）處讀取未定義的的屬性'getCurrentLocation' Object.componentWillMount（Router.js：118）' etc .. – Quesofat

React路由器呈現空白頁面

回答

相關問題