返回react-router-dom时浏览器历史记录不起作用

Question

我们正在开发一个用 dotnet 编写的带有 Razor 视图（纯后端堆栈）的项目。我们计划将每个视图移至React用于react-router-dom处理客户端和服务器中的路由。

我们的想法是一页一页地移动，而不是大爆炸，因为该项目已经在生产中。

客户端路由器

import { Router } from 'react-router-dom'
import { createBrowserHistory, History } from 'history'

const history: History = createBrowserHistory({ basename: baseUrl })

<Router history={history}>
  <Switch>
      <Route path="/example" component={Example} />
      ...
   </Switch>
</Router>

服务器路由器

import { StaticRouter } from 'react-router-dom'

<StaticRouter
 basename={basename}
 context={routerContext}
 location={params.location.path}
>
   <Switch>
      <Route path="/example" component={Example} />
      ...
   </Switch>
</StaticRouter>

问题

/当我从（在 React 路由器中）导航到/example（在 .net 路由器中）然后尝试返回到 时/example，看起来没有转换到 React 路由器，并且浏览器历史记录保持在/。

Answer 1

为了拥有一个同时支持客户端导航和直接导航（例如浏览器书签、共享链接和 seo）的客户端路由器，您需要在服务器中配置后备以提供 index.html（女巫将管理客户端路由）

\n

这是因为浏览器\xe2\x80\x99不知道应用程序的哪个部分是路由管理的。

\n

如果静态文件由静态服务器管理（或者如果您位于反向代理后面）\n例如 nginx，您需要使用 try_files，例如/sf/answers/2452754531/。

\n

如果您的静态文件由 .net 应用程序管理，您可能需要配置默认路由，例如/sf/answers/1719505231/

\n

在迁移过程中，新的 uri 将按如下方式解析：

\n

\n
1. 服务器端路由
\n
2. 回退到客户端路由
\n

\n

应用程序内的 Href 将按如下方式解析：

\n

\n
1. 客户端路由
\n
2. 回退到服务器端路由。
\n

\n