Question

我使用此路由器创建了一个小型React应用：

<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>

当我尝试打不带基本名称的路线时，在控制台上收到此警告：

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

在我希望获得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>

react-router基本名称无法正常工作

1 个答案: