簡單的服務器/客戶端路由react-express（nodejs）

App.js有一個鏈接 - 我不理解我是否需要動作創建者/縮減器？如果是的話，如何將它與服務器端渲染連接起來？簡單的服務器/客戶端路由react-express（nodejs）

基本上在其他組件的負載 - 應通過路徑從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調用，你需要

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

通常與SPA，你會從服務器服務全客戶端應用程序在第一個請求中，爲您的視圖使用客戶端路由，然後觸發任何API請求（如示例）。

來源

2017-09-15 19:09:12 James

更新： 我想你會發現這個教程的幫助：https://medium.com/@foxhound87/server-side-rendering-with-react-router-we-must-react-ep-04-ad03b6b9e05d

使用創建反應的應用程序內創建您的應用程序。做yarn add react-router-dom添加React的路由器。更多的信息在這裏：https://reacttraining.com/react-router/web/guides/quick-start。

把<Router />圍繞應用程序JSX。
使用<Link />創建與<Route />的鏈接。當Link中的路徑匹配時，正確的路由呈現。
還請注意componentDidMount中的請求。

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/greg-artemides - 這是服務器端渲染......對不起，如果我的問題不清楚。 – monkeyjs

哦......你有沒有嘗試過nextjs https://github.com/zeit/next.js/？ –

只是爲了確保我理解正確 - 你有一個建立在Express上的api，你的客戶端應用程序是React，並且你想在服務器之前渲染服務器上的React？ –

在<otherComponent \>的定義，componentDidMount()獲取數據，然後做store.dispatch({ type: 'RECEIVED_DATA', data })更新商店。

來源

2017-09-16 10:16:50

簡單的服務器/客戶端路由react-express（nodejs）

回答

相關問題