反应路由器不工作需要模块

Question

我正在使用 react-router.Bundling 和 browserify + reactify 或 babelify。 /Opa 路径有效，但其他路由（组件来自 index.js）/Senet 路径分机。不是 working.I 在 console.Whats 问题上没有看到任何错误？

我的应用 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");

我的分类列表 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} />);
    }
});

Answer 1

您的 index.js 可能正在 require-ing 组件，但是如果您要像 sayfalar.SenetListesi 那样访问它们，那么您需要确保 index.js 导出那些符号，像这样：

module.exports = {
  TanimKayit: require("./TanimKayit.jsx"),
  SenetListesi: require("./SenetListesi.jsx"),
  FirmaListesi: require("./FirmaListesi.jsx")
};

如您所见，index.js 中包含这些并不能真正为您提供任何便利。除非它添加额外的处理，否则您最好直接要求组件。

此外，请确保您定义组件的模块正在导出 class。否则，如果你 require 他们，你会得到 undefined:

module.exports = React.createClass({ ... });

最后，为了避免所有这些 require 语句，我为 my 路由所做的一件事是执行 require 内联，如下所示：

<Route name="DepoKayit" path="Depo/Kayit" handler={require('./React/DepoKayit.jsx')} />

Answer 2

我猜这是序列上的问题。看上面。 oppa 先定义，其他的在 router.run 之后。希望有所帮助！

反应路由器不工作需要模块

React router not working require modules

javascript

reactjs

react-jsx

react-router