Простая маршрутизация сервера / клиента-экспресс (nodejs)

App.js имеет ссылку на - я не понимаю, если мне нужны создатели действий / редукторы? если так, как связать это с рендерингом на стороне сервера?

В основном при загрузке otherComponent - следует выполнить вызов API из server.js по пути и ввести ответ обратно в компонент - где реагирующие действия вписываются в эту картину?

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>
        `);
});
Источник

3 ответа

В вашем компоненте React просто вызовите нужные API-вызовы

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

Как правило, в случае SPA вы будете обслуживать полное клиентское приложение с сервера по первому запросу, использовать маршрутизацию на стороне клиента для своих представлений, а затем запускать любые запросы API (как в примере).

Источник

В определении <otherComponent \>, получить данные в componentDidMount()тогда делай store.dispatch({ type: 'RECEIVED_DATA', data }) обновить магазин.

Источник

Обновление: я думаю, что вы можете найти этот учебник полезным: https://medium.com/@foxhound87/server-side-rendering-with-react-router-we-must-react-ep-04-ad03b6b9e05d

Используйте create-реагировать на приложение, чтобы создать свое приложение. Делать yarn add react-router-dom добавить роутер React. Подробнее об этом здесь: https://reacttraining.com/react-router/web/guides/quick-start.

  1. Положил <Router /> вокруг приложения JSX.
  2. Использовать <Link /> создавать ссылки на <Route />, Когда путь в Link совпадает, отображается правильный маршрут.
  3. Обратите внимание также на запросы в 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;
Источник
Другие вопросы по тегам