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

Question

我试图从这个 url 中得到 :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 应用制作了一个 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!'))

对于页码和其他 url 参数，您可以像

req.query['page']

检索参数。

Answer 2

React-Router 方式

React Router V4 确实包含一种使用其 matchPath() function, using their standard parameter implementation、"/path-name/:param" 路由匹配在服务器端提取参数数据的方法。

在这种情况下，它允许我在 express 应用响应页面数据之前根据参数做很多服务器端的事情。

注意：这可能不是最基本的实现，但它是我使用 matchPath().[= 的完整 SSR 反应实现的缩减版本25=]

要求

服务器端呈现的 React 应用程序
React-router-dom v4
集中路由文件(because SSR)
Express 应用服务器（我在 Firebase 上托管我的 Express 应用）

在此示例中，服务器端快速应用程序尝试在新页面加载期间运行每个组件中的“initialAction”函数。它通过 promise resolve 和 reject 来知道函数何时完成运行ning，以及可能包含我们可以用 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 **/

Console.log url www.example.com/news-feed/test 的输出 将是

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

如您所见，我们在服务器端发现我们的参数没有使用正则表达式。 matchPath() 为我们完成了工作。我们可以使用 nice, clean urls.

服务器端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);

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

How can I get react-router v4 defined params with express at server-side

node.js

express

reactjs

react-router

react-router-v4

React-Router 方式

要求

Routes.js 例子

组件示例

服务器端index.js