シンプルなサーバー/クライアントルーティングreact-express（nodejs）

App.jsにリンクがあります - 私はアクションクリエイター/レデューサーが必要かどうかわかりませんか？もしそうなら、それをサーバーサイドのレンダリングでワイヤリングする方法はありますか？シンプルなサーバー/クライアントルーティングreact-express（nodejs）

基本的にはotherComponentの読み込み時に、pathでserver.jsからAPI呼び出しを行い、コンポーネントに応答を返す必要があります。このアクションに反応するアクションはどこにありますか？

server.js：あなたは

app.get('/test', (req, res) => { 
    res.send(<otherComponent />); -> this is returning json right now? How to handle this path for example here - where this should make an api call. 
}); 

app.get('*', (req, res) => { 
    res.send(` 
      <!doctype html> 
      <html> 
       <head> 
        <title>My website</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
      </head> 
       <body> 
        <div id='app'>${renderToString(
         <Provider store={createStore(reducers)}> 
          <StaticRouter location={req.url} context={{}}> 
           <App /> 
          </StaticRouter> 
         </Provider> 
        )}</div> 
        <script src='bundle.js'></script> 

       </body> 
      </html> 
     `); 
});

出典

2017-09-15 monkeyjs

コンポーネントを反応して、ちょうどAPIを発射通常SPAで、サーバーからの完全なクライアントアプリケーションにサービスを提供したいあなたは

componentDidMount() { 
    $.get('/test', data => { 
     // use data 
    }); 
}

を必要とする呼び出し、最初のリクエストでは、クライアント側のルーティングをビューに使用し、APIリクエスト（例のように）を起動します。

出典

2017-09-15 19:09:12 James

更新： 私はこのチュートリアルが参考かもしれないと思う：https://medium.com/@foxhound87/server-side-rendering-with-react-router-we-must-react-ep-04-ad03b6b9e05d

使用作成反応するアプリをあなたのアプリを作成します。 Reactのルータを追加するにはyarn add react-router-domを実行してください。これに関する詳しい情報：https://reacttraining.com/react-router/web/guides/quick-start。

App JSXの周りに<Router />を配置します。
<Link />を使用して、<Route />へのリンクを作成します。リンク内のパスが一致すると、正しいルートがレンダリングされます。
componentDidMountのリクエストにも注意してください。 <otherComponent \>の定義において

import React, { Component } from 'react'; 
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; 
import logo from './logo.svg'; 
import './App.css'; 

class App extends Component { 
    render() { 
    return (
     <Router> 
     <div className="App"> 
      <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React</h2> 
      </div> 
      <nav> 
      <Link to="/">Home</Link> 
      <Link to="/test">Test</Link> 
      </nav> 
      <Route path="/" exact component={Index} /> 
      <Route path="/test" exact component={Test} /> 
     </div> 
     </Router> 
    ); 
    } 
} 

class Index extends Component { 
    onComponentDidMount() { 
    fetch('http://yourapi.com') 
     .then(data => this.setState(data)); 
    } 
    render() { 
    return (
     <div> 
     <h1>Index Component</h1> 
     <div>{ /* do something with this.state.data */}</div> 
     </div> 
    ); 
    } 
} 

class Test extends Component { 
    onComponentDidMount() { 
    fetch('http://yourapi.com') 
     .then(data => this.setState(data)); 
    } 
    render() { 
    return (
     <div> 
     <h1>Test Component</h1> 
     <div>{ /* do something with this.state.data */}</div> 
     </div> 
    ); 
    } 
} 

export default App;

出典

2017-09-15 19:52:26

@https：//stackoverflow.com/users/2885592/gregartemides-これはサーバー側のレンダリング用です。申し訳ありませんが私の質問が明確でない場合。 – monkeyjs

ああ...あなたはnextjs https://github.com/zeit/next.js/を試しましたか？ –

ちょうど私が正しく理解していることを確認する - あなたは、エクスプレスに構築されたAPIを持っていて、あなたのクライアントアプリケーションはReactであり、それを提供する前にReactをレンダリングしたいですか？ –

、ストアを更新するstore.dispatch({ type: 'RECEIVED_DATA', data })を行い、その後、componentDidMount()でデータをフェッチします。

出典

2017-09-16 10:16:50

シンプルなサーバー/クライアントルーティングreact-express（nodejs）

答えて

関連する問題