reactjs - 反应路由器基本名称无法正常工作

Question

我用这个路由器创建了一个小的反应应用程序：

<BrowserRouter basename='/hotel/'>
    <Routes />
</BrowserRouter>

这是路线：

<Switch>
    <Layout path="/:agency" component={Home} />
    <Layout path="/:agency/list" component={List} />
    <Layout path="/:agency/detail/:id" component={Detail} />
    <Route component={NoMatch} />
</Switch>

当我尝试在没有基本名称的情况下到达路线时，我在控制台上收到此警告：

</p>

警告：您正在尝试在其 URL 路径不以基本名称开头的页面上使用基本名称。预期路径“/4123”以“/hotel”开头

虽然我期待获得 nomatch 路线...有没有办法获得 nomatch 路线而不是查看我的应用程序？

Answer 1

basename将路由器的应用程序仅限于以 . 开头的路由/hotel。您需要的是NoMatch在根（“/”）级别定义 ，省略basename. 像这样的东西：

<BrowserRouter>
  <Routes />
</BrowserRouter>

...

<Switch>
  <Layout exact path="/hotel/:agency" component={Home} />
  <Layout exact path="/hotel/:agency/list" component={List} />
  <Layout exact path="/hotel/:agency/detail/:id" component={Detail} />
  <Route path="*" component={NoMatch} />
</Switch>