如何使用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引导组件

回答

相关问题