Question

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

我们要记住的是，不要逐页移动，因为该项目已经在生产中了。

当我设置react-router-dom时，好像每个页面都在客户端上处理，并且如果路由不在Router处理的路由之内，则不会重新加载整个页面。

客户端路由器

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

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

<Router history={history}>
  ...(routes and page layout)
</Router>

服务器路由器

<StaticRouter
 basename={basename}
 context={routerContext}
 location={params.location.path}
>
   ...(routes and page layout)
</StaticRouter>

有什么方法可以使路由器以这种方式工作：

如果路由在react-router-dom处理的路由之内，则进行客户端转换
如果路由器不在react-router-dom处理的路由器之内（这意味着仍由dotnet后端处理），请重新加载整个页面。

让我知道是否需要更多信息。预先谢谢你。

Answer 1

您需要在NoMatch的末尾为*路由添加一个Router组件

<Route component={NoMatch} />

并按如下所示定义您的NoMatch组件

function NoMatch() {
    window.location.reload();
    return null;
}

此外，您的路线应在<Switch>内，因为否则NoMatch将与您的路线一样执行，这将导致无限循环。有关更多详细信息，请参见文档：https://reacttraining.com/react-router/web/api/Switch

Answer 2

幸运的是，我们有history道具可以提供帮助，它提供了class Enemy(): def __init__(self, number_of, name): self.number_of = int(number_of) self.name = name self.hp = 20 * self.number_of self.dmg = 2 * self.number_of def attack(self): print(f"you now have {round(class1.hp)} health" + "\n") def appearing(self): if self.number_of > 1: print (f"{self.number_of} {self.name}s have appeared") else: print(f"A {self.name} has appeared") print (f"They have {self.hp} health")参数，可以指示用户是从另一条路线导航还是直接从当前路线开始。

这就是我解决重载循环问题的方法：

class Spider(Enemy):
    posion_dmg = 0
    def __init__(self, number_of, name):
        Enemy.__init__(self, number_of, name)
        self.posion_dmg = 0
    def attack(self,player):
        if self.posion_dmg > 0:
            dot = 2 ** (self.poison_dmg + 1)
            player.hp -= dot
            print ("you are posioned" + "\n")
            print (f"it deals {round(dot)} damage")
        dmg = random.uniform(1.2 * self.dmg, 1.8* self.dmg)
        player.hp -= dmg
        print ("The spider(s) bite(s) you. ")
        print(f"It deals {round(dmg)} damage")
        if randint(1,4) == 1:
            self.poison_dmg += 1
            if self.number_of == 1:
                print ("The spider poisons you")
            else:
                print ("The spiders poison you")
        return Enemy.attack(self)
    def appearing(self):
        print ("*Spiders have a chance to hit you with poison that deals damage over time - this stack exponentially*")
        return Enemy.appearing(self)

然后将路线定义为：

action

如果react-router-dom与任何路由都不匹配，则页面重新加载

2 个答案: