如何在react中的服务器端渲染中使用react路由器dom？

Question

在服务器端react中使用react路由器dom会创建错误。

Invariant Violation: Browser history needs a DOM

如果url匹配我的组件路径，我将使用react router dom BrowserRouter在div中呈现我的组件。

  const routes = [

  { path: 'dashboard',
    exact: true,
    component: Dashboard
  },
  { path: 'notification',
    exact: true,
    component: Notification
  }

];

然后使用以下代码以特定div为目标渲染我的组件：

<div>
     { routes.map((route, index) => (
       <Route
            key={index}
            path={`${match.url}/${route.path}`}
            exact={route.exact}
              />
        ))}
</div>

但此代码仅在客户端react中工作。如何将此实现到服务器端？

Answer 1

看来你错过了添加组件到路由。

<div>
         { routes.map((route, index) => (
           <Route
                key={index}
                path={`${match.url}/${route.path}`}
                exact={route.exact}
                component={route.component}
                  />
            ))}
    </div>

Answer 2

请看一看官方文档，您需要使用不同的历史提供程序进行服务器端渲染，因为服务器上没有真正的DOM（和浏览器的历史记录）。

您可能还想使用内存历史记录，因为它在服务器端运行良好。