node.js - 如何在服务器端使用express获取react-router v4定义的参数

Question

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

routes.js

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

服务器.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

React-Router 方式

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

在这种情况下，它允许我在 Express 应用程序响应页面数据之前根据参数执行许多服务器端操作。

注意:这可能不是最基本的实现，但它是我的完整 SSR React 实现的精简版本，它使用 matchPath()。

要求

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

在此示例中，服务器端 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、reject 和 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);