2

这是我目前拥有的

export const renderer = () => {
  const content = renderToString(React.createElement(Home));
  return ` <html> 
    <head>
   
    </head>
    <body>
    <div  id="root">${content}</div>
    <script></script>
    <script src="main-bundle.js"> </script>
    </body></html> `;
};

我创建了一个 Routes 文件，我需要用 StaticRouter 包装它并将其发送到浏览器。但是我不能像这样通过它：

<StaticRouter>
  <Routes />
</StaticRouter>

在 BrowserRouter 的客户端，我创建了一个应用程序组件并渲染了这个应用程序。

export const app: React.FC<appProps> = ({}) => {
  return (
    <BrowserRouter>
      <Routes />
    </BrowserRouter>
  );
};

在client.tsx里面

   ReactDOM.hydrate(React.createElement(app), document.getElementById("root"));

我无法在服务器端弄清楚它。我唯一在想的是创建一个像 app.tsx 这样的组件，而不是使用 StaticRouter 的 BrowserRouter，但我认为在服务器上创建一个 react 组件组件不是正确的方法。

目前我正在处理这个，但这也不是正确的方法：

const routes = React.createElement(Routes, {}, "");
const router = React.createElement(StaticRouter, {}, routes);

在此处输入图像描述

4

1 回答 1

0

这个模式绝对正确！

即定义一个<App>包含您的路由的组件，然后按照您的建议在服务器和客户端上使用适当的路由器实现提供程序包装它。

我认为思考它的方式类似于依赖注入。您将所有实际的应用程序逻辑封装在<App>其中 -<BrowserRouter>或者<StaticRouter>只是一个提供者，一个实现细节。

它不会改变<App>行为方式，它只是应用适当的实现来使路由在您运行的环境中工作。

于 2020-11-22T11:57:58.087 回答