@reach/router的嵌套路由失效的可能原因

TL;DR

请确认失效路由的上一级路由配置path的时候,附带了后缀/*

出错代码

// App.tsx
const NotFound = (props: RouteComponentProps) => <p>Sorry, nothing here</p>

  <Router>
    <Login path="login" />
    <Reg path="reg" />
    <NotFound default={true} />
  </Router>

// Login.tsx
  <Router>
    <Phone path="phone" />
    <Username path="/" />
    <Scan path="scan" />
  </Router>

直接访问/login/ 可以正确访问到Username
但是访问/login/phone 会回退到NotFound
访问/login/scan 也是会访问NotFound

但是如果把Login里面的路由写到App.tsx里面就可以

const NotFound = (props: RouteComponentProps) => <p>Sorry, nothing here</p>

  <Router>
    <Login path="login">
      <Phone path="phone" />
      <Username path="/" />
      <Scan path="scan" />
    </Login>
    <Reg path="reg" />
    <NotFound default={true} />
  </Router>

问题解决

后面在官网的demo中,终于发现问题所在。

为了方便路由的灵活构建,@reach/router是支持在任意地方构建router,但是前提是父级的router的path,在书写上需要补充一个后缀/*

make sure to use /* so child routes have a chance to match

最开始的代码,做如下修改:

// App.tsx
const NotFound = (props: RouteComponentProps) => <p>Sorry, nothing here</p>

  <Router>
    <Login path="login/*" />
    <Reg path="reg" />
    <NotFound default={true} />
  </Router>

// Login.tsx
  <Router>
    <Phone path="phone" />
    <Username path="/" />
    <Scan path="scan" />
  </Router>

就能正常使用了