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

时间:2018-12-06 19:27:32

标签: reactjs react-router-v4 no-match

我使用此路由器创建了一个小型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路由而不是查看我的应用程序?

1 个答案:

答案 0 :(得分:0)

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>