我正在使用react-router.Bundling与browserify + reactify或babelify。 / Opa路径正在工作,但其他路由(组件来自index.js)/ Senet路径ext。不工作。我在控制台上看不到任何错误。什么问题?
我的应用JSX
var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;
window.React = React;
var mui = require('material-ui'),
ThemeManager = new mui.Styles.ThemeManager(),
RaisedButton = mui.RaisedButton;
var App = React.createClass({
componentDidMount: function() {
this.initializeJsLibrary();
},
componentDidUpdate: function(newProps) {
// its important to pass the new props in
this.initializeJsLibrary();
},
initializeJsLibrary:function(){
$.material.init();
var rules = {
//Select içindeki hidden inputları validate edebilmesi için
ignore: '',
errorPlacement: function (error, element) {
var name = $(element).attr("name");
error.appendTo($("#" + name + "_val"));
}
};
$('#myForm').validate(rules);
$(":input").inputmask();
// autoNumeric
$('.autoNumeric').autoNumeric('init');
console.log("Scripts worked");
},
render: function () {
console.log(RouteHandler);
return (
<p>Selam<RouteHandler {...this.props} /></p>);
}
});
var Opp = React.createClass({
render: function () {
return (<p>Oppppp</p>)
}
})
var routes = (
<Route name="app" path="/" handler={App}>
<Route name="Opp" path="Opa" handler={Opp} />
<Route name="FaturaKayitTipi" path="Fatura/Detay/:faturaTipiID" handler={FaturaKayit} />
<Route name="FaturaFirmaIleKayit" path="Fatura/Detay/:firmaID/:faturaTipiID" handler={FaturaKayit} />
<Route name="SenetListesi" path="Senet" handler={SenetListesi} />
<Route name="SenetKayit" path="Senet/Kayit" handler={SenetKayit} />
<Route name="SenetDuzenle" path="Senet/Kayit/:SenetID" handler={SenetKayit} />
<Route name="TanimKayit" handler={TanimKayit} />
<Route name="CalisanListesi" path="Calisan" handler={CalisanListesi} />
<Route name="CalisanKayit" path="Calisan/Kayit" handler={CalisanKayit} />
<Route name="CalisanDuzenle" path="Calisan/Kayit/:calisanID" handler={CalisanKayit} />
<Route name="FirmaListesi" path="Firma" handler={FirmaListesi} />
<Route name="FirmaKayit" path="Firma/Kayit" handler={FirmaKayit} />
<Route name="FirmaDuzenle" path="Firma/Kayit/:firmaID" handler={FirmaKayit} />
<Route name="MasrafListesi" path="Masraf" handler={MasrafListesi} />
<Route name="KullaniciListesi" path="Kullanici" handler={KullaniciListesi} />
<Route name="KullaniciKayit" path="Kullanici/Kayit" handler={KullaniciKayit} />
<Route name="KullaniciDuzenle" path="Kullanici/Kayit/:KullaniciID" handler={KullaniciKayit} />
<Route name="CalisanMaasListesi" path="CalisanMaas/:CalisanID" handler={CalisanMaasListesi} />
<Route name="CekListesi" path="Cek" handler={CekListesi} />
<Route name="CalisanIslemListesi" path="CalisanIslem/:calisanID" handler={CalisanIslemListesi} />
<Route name="DepoListesi" path="Depo" handler={DepoListesi} />
<Route name="FaturaListesi" path="Fatura" handler={FaturaListesi} />
<Route name="UrunListesi" path="Urun" handler={UrunListesi} />
<Route name="UrunKayit" path="Urun/Kayit" handler={UrunKayit} />
<Route name="UrunDuzenle" path="Urun/Kayit/:urunID" handler={UrunKayit} />
<Route name="DepoKayit" path="Depo/Kayit" handler={DepoKayit} />
<Route name="DepoDuzenle" path="Depo/Kayit/:depoID" handler={DepoKayit} />
<Route name="CekKayit" path="Cek/Kayit" handler={CekKayit} />
<Route name="CekDuzenle" path="Cek/Kayit/:cekID" handler={CekKayit} />
<Route name="MarkaKayit" path="Marka/Kayit" handler={MarkaKayit} />
<Route name="MarkaDuzenle" path="Marka/Kayit/:depoID" handler={MarkaKayit} />
<Route name="KategoriListesi" path="Kategori" handler={KategoriListesi} />
<Route name="KategoriKayit" path="Kategori/Kayit" handler={KategoriKayit} />
<Route name="KategoriDuzenle" path="Kategori/Kayit/:kategoriID" handler={KategoriKayit} />
<Route name="HesapListesi" path="Hesap" handler={HesapListesi} />
<Route name="HesapKayit" path="Hesap/Kayit" handler={HesapKayit} />
<Route name="HesapDetay" path="Hesap/Detay/:hesapID" handler={HesapDetay} />
<Route name="FirmaDetay" path="Firma/Detay/:firmaID" handler={FirmaDetay} />
<Route name="HesapDuzenle" path="Hesap/Kayit/:hesapID" handler={HesapKayit} />
<Route name="TahsilatKayit" path="Tahsilat/Kayit/:firmaID" handler={TahsilatKayit} />
<Route name="DepoUrunKayit" path="Depo/UrunEkle" handler={DepoUrunKayit} />
<Route name="DepoUrunKayitUrun" path="Depo/UrunEkle/Urun/:urunID" handler={DepoUrunKayit} />
<Route name="DepoUrunKayitDepo" path="Depo/UrunEkle/Depo/:depoID" handler={DepoUrunKayit} />
</Route>
);
Router.run(routes, function (Handler,state) {
var params = state.params;
React.render(<Handler params={params} />, document.getElementById("reactBody"));
});
var FaturaKayit = require("./React/FaturaKayit.jsx");
var AjaxGrid = require("./React/AjaxGrid.jsx");
var AutoComplate = require("./React/AutoComplate.jsx");
var CalisanIslemListesi = require("./React/CalisanIslemListesi.jsx");
var CalisanKayit = require("./React/CalisanKayit.jsx");
var CalisanListesi = require("./React/CalisanListesi.jsx");
var CalisanMaasListesi = require("./React/CalisanMaasListesi.jsx");
var CekKayit = require("./React/CekKayit.jsx");
var CekListesi = require("./React/CekListesi.jsx");
var DepoKayit = require("./React/DepoKayit.jsx");
var DepoListesi = require("./React/DepoListesi.jsx");
var DepoUrunKayit = require("./React/DepoUrunKayit.jsx");
var FaturaKayit = require("./React/FaturaKayit.jsx");
var FaturaListesi = require("./React/FaturaListesi.jsx");
var FirmaDetay = require("./React/FirmaDetay.jsx");
var FirmaKayit = require("./React/FirmaKayit.jsx");
var FirmaListesi = require("./React/FirmaListesi.jsx");
var HesapDetay = require("./React/HesapDetay.jsx");
var HesapKayit = require("./React/HesapKayit.jsx");
var HesapListesi = require("./React/HesapListesi.jsx");
var KategoriKayit = require("./React/KategoriKayit.jsx");
var KategoriListesi = require("./React/KategoriListesi.jsx");
var KullaniciKayit = require("./React/KullaniciKayit.jsx");
var KullaniciListesi = require("./React/KullaniciListesi.jsx");
var MarkaKayit = require("./React/MarkaKayit.jsx");
var MasrafListesi = require("./React/MasrafListesi.jsx");
var ModalComponent = require("./React/ModalComponent.jsx");
var SelectList = require("./React/SelectList.jsx");
var SenetKayit = require("./React/SenetKayit.jsx");
var SenetListesi = require("./React/SenetListesi.jsx");
var TahsilatKayit = require("./React/TahsilatKayit.jsx");
var TanimKayit = require("./React/TanimKayit.jsx");
var UrunKayit = require("./React/UrunKayit.jsx");
var UrunListesi = require("./React/UrunListesi.jsx");
var Util = require("./React/Util.jsx");
&#13;
My Kategori Listesi JSX
var KategoriListesi = React.createClass({
componentWillMount: function () {
this.defaultColumns = [["Adi","Kategori Adı"],["Grup.Adi","Kategori Grubu"]];
this.externalColumns = [["",EditRows]];
this.dataUrl = "/Kategori/";
},
render:function(){
return (<AjaxGridComponent dataUrl={this.dataUrl} filter={true} controllerName={'kategori'} showExternalColumn={true} externalColumns={this.externalColumns} defaultColumns={this.defaultColumns} />);
}
});
&#13;
答案 0 :(得分:2)
您的index.js
可能是require
个组件,但如果您要访问sayfalar.SenetListesi
,那么您需要确保index.js
exports 这些符号,如下所示:
module.exports = {
TanimKayit: require("./TanimKayit.jsx"),
SenetListesi: require("./SenetListesi.jsx"),
FirmaListesi: require("./FirmaListesi.jsx")
};
正如您所看到的,在index.js
中拥有这些内容并不能为您提供任何便利。除非它添加额外的处理,否则最好直接要求组件。
此外,请确保定义组件的模块正在导出类。否则,如果您require
他们,您将获得undefined
:
module.exports = React.createClass({ ... });
最后,我为我的路由做的一件事就是避免所有这些require
语句,这是require
内联,如下所示:
<Route name="DepoKayit" path="Depo/Kayit" handler={require('./React/DepoKayit.jsx')} />
答案 1 :(得分:0)
我猜这是序列上的一个问题。往上看。首先定义oppa,而将其他定义在router.run之后。希望有所帮助!