你好,我刚刚将一个React与MartyJS通量从SSR更改为客户端渲染,与react-router

时间:2015-08-02 12:00:59

标签: express reactjs react-router martyjs

因为标题描述我在github上在denlillemand / react上做了一个应用程序。它有一个快速后端,只提供一个简单的html模板,导入我的bundle.js。该应用程序最初渲染得很好,但没有一条路线似乎工作。

以下是涉及的组件:

./的application.js

   import React from "react"; 
   import Marty from "marty"; 
   import actions from "./actions";
   import stores from "./stores";
   import queries from "./queries";
   import sources from "./sources";
   import Router from "./Router";
   import RealApp from "./components/App";

class Application extends Marty.Application {
  constructor(options) {
  super(options);
  this.register(actions);
  this.register(stores); 
  this.register(queries);
  this.register(sources);
  this.router = Router;
  }
}

var app = new Application();
var { ApplicationContainer }  = require('marty');

app.router.run(function(Handler,state){
      React.render((
              <ApplicationContainer app={app}>
                      <Handler{...state} />           
              </ApplicationContainer>         
      ), document.getElementById("app"));
});

./组件/ App.js

 import React from "react"; 
 import Router from "react-router";
 import Header from "./core/Header";
 import Footer from "./core/Footer";

 var RouteHandler = Router.RouteHandler;

 export default class App extends React.Component {
   constructor(props) {     
    super(props);          
    this.state = {         
    }
  } 
  render() {
    return (
      <div>                
       <Header />           
       <RouteHandler />
       <Footer />           
      </div>               
     );
   }
} 

./ Routes.js

 import React from "react";
 import {Route} from "react-router";
 import {DefaultRoute} from "react-router";
 import App from "./components/App";
 import About from "./components/About";
 import ChapterOne from "./components/chapterone/ChapterOne";
 import ChapterTwo from "./components/chaptertwo/ChapterTwo";
 import ChapterThree from "./components/chapterthree/ChapterThree";
 import ChapterFour from "./components/chapterfour/ChapterFour";

  export default (
          <Route name="app" path="/" handler={App}>
                <Route path="/about" handler={About}/>
                <Route path="/chapters/chapterone" handler={ChapterOne} />
                 <Route path="/chapters/chaptertwo" handler={ChapterTwo} />
                 <Route path="/chapters/chapterthree" handler={ChapterThree} />
                 <Route path="/chapters/chapterfour" handler={ChapterFour} />
                 <DefaultRoute name="default" handler={About}/>
         </Route>
  );

./ Router.js

  import Router from "react-router";
  import routes from "./Routes";

  let location = () => {
       if(typeof window !== undefined){
         return Router.historyLocation;
       }
   } 

    export default Router.create({
         routes:routes,
         location:location()
     }); 

默认路由似乎是唯一有效的路由,因为我点击了About组件。这个应用程序在不久前是SSR时工作,我有点想知道如果我正确设置react-router,但看着它似乎我的DOCS。

1 个答案:

答案 0 :(得分:0)

我想我必须回答我自己的问题,

MartyJS的创建者最近杀死了他自己的项目, 如果你按照他的推特他宣布它.. 所以我想我正在转向redux因为它有3500+ github启动我想我会更容易找到对出现的redux问题的支持。

谢谢。