React-Router方式

Question

我尝试从此网址获取:userId“albert” http://localhost:5000/search/albert?query=al&page=1 在服务器端但是失败了，我该怎样做才能在node.js上使用express来正确定义react-router参数？

routes.js

[
  {
    path: '/search/:userId',
    component: Search,
  }, {
    path: '/search',
    component: Search,
  }
  ... 
]

server.js

server.get('*', async (req, res, next) => {
  const pageData = await routes
  .filter(route => matchPath(req.path, route))
  .map((route) => {
    console.log(route)
    return route.component
  })
}

Answer 1

刚刚使用示例node.js app制作了一个类似

的server.js

const express = require('express')
const app = express()

app.get('/search/:userid', (req, res) => res.json({ key: `Hello World for search with id=${req.params.userid}` }))

app.get('/search', (req, res) => res.send('Hello World!i for search'))

app.get('*', (req, res) => res.send('Hello World!'))

app.listen(3000, () => console.log('Example app listening on port 3000!'))

对于页码和其他网址参数，你可以这样做

req.query['page']

检索参数。

Answer 2

React-Router方式

React Router V4确实包含一种使用其matchPath()函数，使用其标准parameter implementation，"/path-name/:param"路由匹配来提取服务器端参数数据的方法。

在这种情况下，它使我可以在Express应用响应页面数据之前根据该参数执行很多服务器端工作。

注意：这可能不是最基本的实现，但这是我使用matchPath()的完整SSR react实现的简化版本。

要求

服务器端渲染的React应用
React-router-dom v4
集中路线文件(because SSR)
Express应用服务器（我在Firebase上托管我的Express应用）

在此示例中，服务器端快速应用程序尝试在刷新页面时在每个组件中运行“ initialAction”功能。它通过promise解析和拒绝来知道函数何时完成运行，以及可以包含matchPath()可以提取的有用参数的请求对象。再次使用matchPath()对每个匹配的路由执行此操作。

Routes.js示例

其中:id是URL中的“ id”参数。

const routes = [
    {
        path: "/news-feed/:id",
        component: NewsFeed,
        exact: true
    },
]

export default routes;

组件示例

仅在组件中显示initialAction()函数

import { Link, matchPath } from 'react-router-dom';

class NewsFeed extends Component {

    // Server always passes ability to resolve, reject in the initial action
    // for async data requirements. req object always passed from express to
    // the initial action.
    static initialAction(resolve, reject, req) {

        function getRouteData() {
            let matchingRoute = routes.find(route => {
                return matchPath(req.path, route);
            });
            console.log("Matching Route: ", matchingRoute);

            return matchPath(req.path, matchingRoute);
        }

        let routeData = getRouteData();
        console.log("Route Data: ", routeData);
    }

/** REST OF COMPONENT **/

网址www.example.com/news-feed/test的

Console.log输出为

Route Data:  { path: '/news-feed/:id',
  url: '/news-feed/test',
  isExact: true,
  params: { id: 'test' } }

如您所见，我们在服务器端没有使用正则表达式就找到了我们的参数。 matchPath()为我们完成了工作。我们可以使用干净的网址。

服务器端index.js

调用初始动作的地方，带有promise的resolve，拒绝和req对象。 请记住，这是一个Firebase托管示例，对于不同的托管服务提供商可能有所不同-您调用initialAction函数的方法也可能有所不同。

import React from "react";
import ReactDOMServer from 'react-dom/server';
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { StaticRouter, matchPath } from "react-router-dom";
import routes from "../shared/components/App/routes.js";
import express from "express";
import * as functions from "firebase-functions";

// Import Components, Reducers, Styles
import App from "../shared/components/App";
import reducers from "../shared/reducers";

// Prepare our store to be enhanced with middleware
const middleware = [thunk];
const createStoreWithMiddleware = applyMiddleware(...middleware)(createStore);

// Create store, compatible with REDUX_DEVTOOLS (chrome extension)
const store = createStoreWithMiddleware(reducers);

// Implement cors middleware to allow cross-origin
const cors = require('cors')({ origin: true });

const app = express();
app.get('**', (req, res) => {

    cors(req, res, () => {
        // Finds the component for the given route, runs the "initial action" on the component
        // The initialAction is a function on all server-side renderable components that must retrieve data before sending the http response
        // Initial action always requires (resolve, reject, req), and returns a promise.
        const promises = routes.reduce((acc, route) => {
            if (matchPath(req.url, route) && route.component && route.component.initialAction) {
                acc.push(new Promise(function (resolve, reject) {
                    // console.log("Calling initial action...");
                    store.dispatch(route.component.initialAction(resolve, reject, req));
                }));
            }
            return acc;
        }, []);

        // Send our response only once all promises (from all components included in the route) have resolved
        Promise.all(promises)
            .then(() => {
                const context = {};
                const html = ReactDOMServer.renderToString(
                    <Provider store={store}>
                        <StaticRouter location={req.url} context={context}>
                            <App />
                        </StaticRouter>
                    </Provider>
                );
                const preloadedState = store.getState();
                res.status(200).send(renderFullPage(html, preloadedState));

            })
            .catch(function (error) {
                console.log("Promise error at server", error);
            });
    });
});

module.exports = functions.https.onRequest(app);

如何在服务器端使用express表示react-router v4定义的params

2 个答案:

React-Router方式

要求

Routes.js示例

组件示例

服务器端index.js