如何使用react-router引導組件

我遇到了一個問題，我的React組件只是沒有引導到頁面中，但沒有顯示錯誤消息，所以我不知道發生了什麼。我不認爲問題出在CalcList.js或Calculator.js文件上，因爲我已經能夠在單頁（即不使用react-router）上下文的情況下渲染它們而沒有任何問題。如何使用react-router引導組件

使用下面的index.js和App.js父母實現，當我訪問時，我只是得到一個沒有任何控制檯反饋的空白頁面。

index.js

import React from 'react'; 
import {render} from 'react-dom'; 
import {Router, Route, Link, IndexRoute, browserHistory} from 'react-router'; 
import App from './App'; 
import {Calculator} from './Calculator'; 
import {CalcList} from './CalcList'; 

render ((
    <Router history={browserHistory}> 
     <Route path="/" component={App}> 
     <IndexRoute component={CalcList} /> 
     <Route path="/calculator/:num" component={Calculator} /> 
     </Route> 
    </Router> 
), document.getElementById('root'));

App.js

import React, { Component } from 'react'; 
import {render} from 'react-dom'; 
import {Router, Route, IndexRoute, hashHistory} from 'react-router'; 
import CalcList from './CalcList'; 
import Calculator from './Calculator'; 

export default class App extends Component { 
    render() { 
    var children = React.Children.map(this.props.children, function(child) { 
     return React.cloneElement(child); 
    }); 
    return (
     <div id="app"> 
     {children} 
     </div> 
    ); 
    } 
}

來源

2016-05-18 zahabba

如何你是否在提供你的應用程序頁面（例如， webpack dev服務器，其他）？我問，因爲你使用HTML5歷史api，你的服務器需要支持它（即，當你請求/計算器/ 1你的服務器應該爲你提供index.html頁面）。它是否工作，如果在index.js裏面你使用''''''而不是？ –

另外，你爲什麼要克隆應用程序的孩子，而不是僅僅做'''返回（

{this.props.children}

）;''' –

你已經確定你的組件的默認出口所以下面行index.js是不正確的：

import {Calculator} from './Calculator'; 
import {CalcList} from './CalcList';

更改爲此：

import Calculator from './Calculator'; 
import CalcList from './CalcList';

或者，您可以創建一個出口這樣的組件對象：

components.js：

import Calculator from './Calculator'; 
import CalcList from './CalcList'; 

export { 
    Calculator, 
    CalcList 
}

，然後你原來的進口將這樣的工作：

import { Calculator, CalcList } from './components';

來源

2016-05-19 14:57:15 Mark

如何使用react-router引導組件

回答

相關問題