如何使用 React-Router 的服务器端渲染中的 <Link> 标记更改 StaticRouter 的位置属性

Question

已经有效的：

主页上的服务器端呈现。

什么不起作用：

通过单击 <Link> 标记转到其他路由，从主页在其他路由上呈现服务器端。好吧有点不工作，有点同时工作。

工作方式?:

如果您在单击 <Link> 后查看页面的页面源代码，您将看到服务器端渲染获取的所有初始数据，但它们并未存储在客户端。

解法?:

经过大量时间、研究和询问，我得出的结论是服务器端的 StaticRouter 存在问题。特别是 location 道具。此道具通过 req.path 或 req.url，我都尝试过并得到相同的结果。我将使用 req.path 作为示例。

让我们看看这里的代码块：

console.log(req.path);
    const content = renderToString(
      <Provider store={store}>
        <StaticRouter location={req.path} context={context}>
          <div>{renderRoutes(routes)}</div>
        </StaticRouter>
      </Provider>
    );

这里我们在 req.path 被传递给 location prop 之前注销它。我认为这就是告诉路由器将正确的数据加载到商店并将其发送到客户端减速器。

我将逐步了解应用流程发生的情况。

On / 路由加载 console.log(req.path) 在服务器端终端中显示：

/

但是，如果我单击 <Link to="/users">Users</Link>，控制台日志什么也不做。

现在我可以从这里刷新页面，它开始运行，数据已加载并且 console.log(req.path) 显示：

/users

我可以做的其他事情是直接转到 localhost:3000/users 的路线，console.log(req.path) 将显示 /users 并且数据正确加载。但这两种方式都不是真正的解决方案，只是因为它们在某种程度上 "bypass" <Link> 标记才有效。

已经有什么问题了？？？:

我想知道如何使用 <Link> 标签来更改 req.path 或 req.url 因为这就是我所看到的问题或者是否有可能.这样 StaticRouter 中的 location 道具将在单击 <Link> 时更改。

Answer 1

这段代码：

console.log(req.path);
    const content = renderToString(
      <Provider store={store}>
        <StaticRouter location={req.path} context={context}>
          <div>{renderRoutes(routes)}</div>
        </StaticRouter>
      </Provider>
    );

在服务器端执行，它发生在您登陆站点时，通过键入 url 直接访问某个页面或刷新页面时，因为在这些情况下您 "ask" 服务器为您做渲染。

<Link> 用于浏览器端的导航，它不要求服务器做任何事情，它都在浏览器中执行，这就是它永远不会触发 console.log(req.path); 的原因。除非你明确地这样做，例如，使用像这样的代码以编程方式刷新页面 location.reload();。在我看来，如果你觉得有必要做这样的事情，你就错过了重点。

SSR - 长话短说：

我们使用 SSR，因此我们在登陆页面时不会等待初始 HTML 和初始数据。我们可以将服务器上的组件呈现为静态模型，而不是发送空白页面并让浏览器完成所有工作，然后将包含重新填充数据的页面发送到浏览器。当 bundle.js 出现时，浏览器将从那时起接管，负责导航并加载交互所需的任何内容。

使用 SSR 的一些好处是快速首次绘制，这会带来更好的用户体验并可能更好的 SEO，因为爬虫能更好地读取静态模型从服务器发送而不是在客户端生成的动态模型。

如何使用 React-Router 的服务器端渲染中的 <Link> 标记更改 StaticRouter 的位置属性

How to change StaticRouter's location prop using the <Link> tag in Server Side Rendering with React-Router

express

reactjs

redux

server-side-rendering

react-router-dom