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 Router中）导航到/example（在.net Router中），然后尝试返回到/example时，好像没有过渡到React Router，浏览器历史记录就停留在/上。

Answer 1

要使客户端路由器既可以同时进行客户端导航又可以进行直接导航（例如浏览器书签，共享链接ans seo），则需要在服务器中配置后备以便提供index.html（巫婆将管理客户端）路由）

这是因为浏览器不知道您的应用程序的哪个部分是路由托管的。

如果静态文件由静态服务器管理（或者您位于反向代理之后）例如nginx，您需要使用try_files，例如https://stackoverflow.com/a/35039350。

如果您的静态文件是由.net应用程序管理的，则可能需要配置默认路由，例如https://stackoverflow.com/a/24564360

在迁移过程中，新uri的解决方法如下：

服务器端路由
回退到客户端路由

应用程序内部的Href将按以下方式解决：

客户端路由
回退到服务器端路由。

Answer 2

您可以将每个.Net路由添加到您的React路由器配置中，并在每次登陆时重新加载-类似于：

<Route path="/my-dot-net-page" component={ReloadComp} />

ReloadComp如下所示：

const ReloadComp: React.FC<RouteComponentProps> = props => (window.location.href = props.location.pathname);

这将导致在每条路由上着陆时重新加载，并且应让您的.Net网络服务器处理该路由。

或者，我认为在您将整个项目移至React之前，最好还是推迟一下react-router。

您现在想从中得到什么？

如果导航后没有完全重新加载，则它将在React页面和.Net页面之间不起作用-需要重新加载。

一旦所有视图都在React中，对react-router的更改将变得更简单

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

2 个答案: