简单的服务器/客户端路由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）

回答

相关问题