React Router SSR：如何在服务端组件中获取路由参数

针对你无法在服务端组件中使用useParams钩子获取路由参数的问题，提供以下几种可行方案：

方案1：利用路由配置的服务端数据预取钩子 #

react-router-ssr通常支持在路由配置中定义服务端数据预取函数（如getInitialProps），通过该函数获取路由参数并传递给组件：

function Sample(props) {
    Meteor.subscribe('document', props.documentId);
    const document = Documents.findOne();
    return <h1>{document.title}</h1>
}

const AppRoutesSSR = [{
    path: '/documents/:documentId',
    element: <Sample />,
    // 服务端执行此函数，提取路由参数并注入组件props
    getInitialProps: ({ params }) => ({
        documentId: params.documentId
    })
}, {
    // 其他路由配置
}]

renderWithSSR(AppRoutesSSR, {
  renderTarget: 'root',
});

方案2：通过路由组件的内置props获取参数 #

若你的react-router-ssr基于旧版React Router封装，路由组件会自动接收match、location等路由相关props，直接从match.params中提取参数即可：

function Sample(props) {
    const { documentId } = props.match.params;
    Meteor.subscribe('document', documentId);
    const document = Documents.findOne();
    return <h1>{document.title}</h1>
}

const AppRoutesSSR = [{
    path: '/documents/:documentId',
    element: <Sample />
}, {
    // 其他路由配置
}]

renderWithSSR(AppRoutesSSR, {
  renderTarget: 'root',
});

方案3：服务端手动解析URL并传递参数 #

如果上述方案不适用，可在服务端请求处理逻辑中直接解析URL参数，通过全局上下文或自定义props传递给组件：

// 服务端请求处理示例（以Express为例）
app.get('*', (req, res) => {
    // 从请求路径中提取documentId
    const [, , documentId] = req.path.split('/');

    // 将参数注入SSR渲染配置
    const ssrHtml = renderWithSSR(AppRoutesSSR, {
        renderTarget: 'root',
        ssrData: { documentId }
    });

    // 在返回的HTML中注入全局变量，供组件读取
    res.send(`
        <div id="root">${ssrHtml}</div>
        <script>window.__SSR_DATA__ = ${JSON.stringify({ documentId })}</script>
    `);
});

// 修改Sample组件读取全局参数
function Sample() {
    const documentId = window.__SSR_DATA__.documentId;
    Meteor.subscribe('document', documentId);
    const document = Documents.findOne();
    return <h1>{document.title}</h1>
}

const AppRoutesSSR = [{
    path: '/documents/:documentId',
    element: <Sample />
}, {
    // 其他路由配置
}]

内容的提问来源于stack exchange，提问作者Emo