React Router SSR：useLocation()只能在<Router>组件的上下文中使用

Question

我遵循了本指南https://reactrouter.com/en/main/guides/ssr#without-a-data-router

我正在服务器渲染这样的应用程序

<StaticRouter location={req.url}>
  <Routes>
    // ...
  </Routes>
</StaticRouter>

我的一条路线包含此代码

import React from 'react'
import { useLocation } from 'react-router'

export function SceneButton(props: SceneButtonProps) {
  const location = useLocation()
  // ...
  return <button>Scene</button>
}

当我渲染应用程序时，出现此错误

useLocation() may be used only in the context of a <Router> component.

如何以浏览器端和服务器端都有效的方式获取此处的位置？

另外，奇怪的是，React Router 文档真的希望我使用 Remix，但我的应用程序很大，我无力重写它。

Answer 1

如果您使用的是

StaticRouter

 中的 

react-router-dom/server

import { StaticRouter } from "react-router-dom/server";

然后我怀疑您还需要从同一个库导入

useLocation

钩子，例如

react-router-dom

而不是较低级别的

react-router

库。

更新

SceneButton

以从

react-router-dom

导入：

import React from 'react';
import { useLocation } from 'react-router-dom';

export function SceneButton(props: SceneButtonProps) {
  const location = useLocation();
  // ...
  return <button>Scene</button>;
}